I've recently just integrated some buttons into my code but it wont' let me change the font-color with color-parameter. Everything else can be changed, but not the font-color. its black 'normal' and white on hover. Can someone maybe help?
Thats the CSS
.button {
border: none;
padding: 0.7em 2.6em;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 0.8vw;
margin: 1.2em 0 3em 0;
cursor: pointer;
font-family: "Gill Sans", Sans-Serif;
font-weight: 600;
background-color: #b9b9b9;
color: #?????
}
.button:hover {
background-color: #b9b9b9;
text-decoration: underline;
color: #?????
}
And the HTML
<button class="button" onclick="window.location.href='http://www.XXXX.xx/‚;“>Button-Text</button >
I currently have an App_Offline.htm file that works fine. When it's on the root of the site, all users are forces to the App_Offline.htm page and the application is prevented from loading.
We are adding some animations and images and the only proper way to do it in an App_Offline.htm is to use base64 images, inline.
The minute I add this (note I shortened the base64 for the post), it works if I go to the file in the browser directly but IIS/Azure/App Service, does not automatically force users to the page and prevent the app like it normally does.
.image2 {
width: 57px;
height: 54px;
background-image: url(data:image/png;base64,iVBOR.....rkJggg==);
}
I figure there some content security setting or something I need add. Even though the page loads properly, what's preventing IIS/App Service from forcing everyone to the page when it has a base64 image?
Unless there's a file limit size, it's current 2896 KB, but from research there doesn't seem to be one.
Normally, when you have the app_offline.htm file in the application root directory, your web application will be closed and all requests will be directed to the app_offline.html page.
So you have two ways,
You can write .image2 related code in app_offline.htm
Put the .css on other websites, or use other addresses to access the files.
Related Post
Add css style sheet to app_offline
PRIVIOUS
For more details, you can refer my sample code, you just need to replace base64 image code.
My test result.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
src: local("Segoe UI"), local("Open Sans"), local("OpenSans"), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/K88pR3goAWT7BTt32Z01mz8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
body {
font-family: "Open Sans";
}
h1 {
font-size: 90px !important;
}
.error-page-container {
color: #333333;
margin: 50px auto 0;
text-align: center;
width: 600px;
}
.error-page-container h1 {
font-size: 120px;
font-weight: normal;
line-height: 120px;
margin: 10px 0;
font-family: "Open Sans";
}
.error-page-container h2 {
border-bottom: 1px solid #CCCCCC;
color: #666666;
font-size: 18px;
font-weight: normal; /*text-transform: uppercase;*/
font-family: "Open Sans";
}
.error-page-container a {
text-decoration: none;
color: #ffffff;
background-color: #009AD7;
padding: 11px 19px;
}
.error-page-container a:hover {
text-decoration: none;
}
.image2 {
width: 500px;
height: 300px;
background-image: url('data:image/png;base64,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');
}
</style>
<title>
Under Maintenance
</title>
</head>
<body>
<div class="error-page-container">
<h1>Maintenance</h1>
<div class="image2" src="" alt="test">
</div>
<h2>
<p>Website is under maintenance right now. It will be back in few minutes.</p>
</h2>
<br />
Try again
</div>
</body>
</html>
I'm using the newest version of Font Awesome. When viewing the responsive version of my website, I have a navigation panel. At the top right I need an X (Font Awesome css: f00d). This icon doesn't show up. Other icons, like a folder icon (f07b), do show up. Why is this and what am I doing wrong? An example: beta.degeintrappers.nl
In the head I use:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
As css I have:
#navPanel .close:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: "Font Awesome 5 Free";
font-style: normal;
font-weight: normal;
text-transform: none !important;
}
#navPanel .close:before {
content: "\f00d";
font-size: 1.25rem;
}
This problem is not well documented by Font Awesome, however, the way to resolve it is by appending the font-family and font-weight property.
#navPanel .close:before {
font-family: "Font Awesome 5 Free";
content: "\f00d";
font-size: 1.25rem;
font-weight: 900;
}
I am getting different behavior between mathjax on a webpage and mathjax-node. When I load it on the webpage I get the correct output that I am looking for. For example I have a line = $_{a} ^{x} A $ where I want the superscript and subscript above and below each other. It works fine if I convert it on the webpage however when I try to run it through mathjax-node I get what would look like this _{ax}A. Here is everything related to mathjax in my code:
var mathjax = require('mathjax-node');
mathjax.config({ MathJax: { } });
mathjax.start();
async function formatMath(line) {
try{
var line;
if(line.indexOf('$')==-1)
return line;
while(line.indexOf('$') > -1){
var re = /\$(.*?)\$/;
var match = re.exec(line)[0];
var math = match.slice(1, -1);
let result = await mathjax.typeset({
math: math,
format: "inline-TeX",
html: true
});
line = line.replace(match, result.html);
if(line=="$_{a} ^{x} A $"){
console.log(line);
console.log(match);
console.log(math);
}
}
return line;
} catch(err) {
if(err) {
return Error(`Error at formMath(): ${err}`);
}
}
}
Example of what I am getting using the above function with '$_{a} ^{x} A $'
Example of what I want when I just add html = "\\(_{a} ^{x} A \\)"; directly into the webpage
This is my exact output from above:
<span class="mjx-chtml"><span class="mjx-math" aria-label="_{a} ^{x} A "><span c
lass="mjx-mrow" aria-hidden="true"><span class="mjx-msubsup"><span class="mjx-ba
se"><span class="mjx-mi"><span class="mjx-char"></span></span></span><span class
="mjx-stack" style="vertical-align: -0.156em;"><span class="mjx-sup" style="font
-size: 70.7%; padding-bottom: 0.255em; padding-left: 0px; padding-right: 0.071em
;"><span class="mjx-texatom" style=""><span class="mjx-mrow"><span class="mjx-mi
"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.225em; padding-bo
ttom: 0.298em;">x</span></span></span></span></span><span class="mjx-sub" style=
"font-size: 70.7%; padding-right: 0.071em;"><span class="mjx-texatom" style=""><
span class="mjx-mrow"><span class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I
" style="padding-top: 0.225em; padding-bottom: 0.298em;">a</span></span></span><
/span></span></span></span><span class="mjx-mi"><span class="mjx-char MJXc-TeX-m
ath-I" style="padding-top: 0.519em; padding-bottom: 0.298em;">A</span></span></s
pan></span></span>
$_{a} ^{x} A $
_{a} ^{x} A
Note that I have already tried converting my regex to \\((.*)\\).
I tried to play around with useGlobalCache and other options with no luck. I do not understand why this is happening or if it has to do with how my formulas are being formatted. I am using "mathjax-node": "2.1.1". Thanks in advance.
The HTML sample is actually ok.
I'm guessing you're not generating and applying the CSS. This is a separate step for server-side processing since it's a one-time job.
You need to run typeset with the css option to have mathjax-node add the CSS declarations to the result object, cf. https://github.com/mathjax/MathJax-node#typesetoptions-callback.
Here's the HTML from your OP with the CSS applied.
.mjx-chtml {display: inline-block; line-height: 0; text-indent: 0; text-align: left; text-transform: none; font-style: normal; font-weight: normal; font-size: 100%; font-size-adjust: none; letter-spacing: normal; word-wrap: normal; word-spacing: normal; white-space: nowrap; float: none; direction: ltr; max-width: none; max-height: none; min-width: 0; min-height: 0; border: 0; margin: 0; padding: 1px 0}
.MJXc-display {display: block; text-align: center; margin: 1em 0; padding: 0}
.mjx-chtml[tabindex]:focus, body :focus .mjx-chtml[tabindex] {display: inline-table}
.mjx-full-width {text-align: center; display: table-cell!important; width: 10000em}
.mjx-math {display: inline-block; border-collapse: separate; border-spacing: 0}
.mjx-math * {display: inline-block; -webkit-box-sizing: content-box!important; -moz-box-sizing: content-box!important; box-sizing: content-box!important; text-align: left}
.mjx-numerator {display: block; text-align: center}
.mjx-denominator {display: block; text-align: center}
.MJXc-stacked {height: 0; position: relative}
.MJXc-stacked > * {position: absolute}
.MJXc-bevelled > * {display: inline-block}
.mjx-stack {display: inline-block}
.mjx-op {display: block}
.mjx-under {display: table-cell}
.mjx-over {display: block}
.mjx-over > * {padding-left: 0px!important; padding-right: 0px!important}
.mjx-under > * {padding-left: 0px!important; padding-right: 0px!important}
.mjx-stack > .mjx-sup {display: block}
.mjx-stack > .mjx-sub {display: block}
.mjx-prestack > .mjx-presup {display: block}
.mjx-prestack > .mjx-presub {display: block}
.mjx-delim-h > .mjx-char {display: inline-block}
.mjx-surd {vertical-align: top}
.mjx-mphantom * {visibility: hidden}
.mjx-merror {background-color: #FFFF88; color: #CC0000; border: 1px solid #CC0000; padding: 2px 3px; font-style: normal; font-size: 90%}
.mjx-annotation-xml {line-height: normal}
.mjx-menclose > svg {fill: none; stroke: currentColor}
.mjx-mtr {display: table-row}
.mjx-mlabeledtr {display: table-row}
.mjx-mtd {display: table-cell; text-align: center}
.mjx-label {display: table-row}
.mjx-box {display: inline-block}
.mjx-block {display: block}
.mjx-span {display: inline}
.mjx-char {display: block; white-space: pre}
.mjx-itable {display: inline-table; width: auto}
.mjx-row {display: table-row}
.mjx-cell {display: table-cell}
.mjx-table {display: table; width: 100%}
.mjx-line {display: block; height: 0}
.mjx-strut {width: 0; padding-top: 1em}
.mjx-vsize {width: 0}
.MJXc-space1 {margin-left: .167em}
.MJXc-space2 {margin-left: .222em}
.MJXc-space3 {margin-left: .278em}
.mjx-ex-box-test {position: absolute; overflow: hidden; width: 1px; height: 60ex}
.mjx-line-box-test {display: table!important}
.mjx-line-box-test span {display: table-cell!important; width: 10000em!important; min-width: 0; max-width: none; padding: 0; border: 0; margin: 0}
.MJXc-TeX-unknown-R {font-family: monospace; font-style: normal; font-weight: normal}
.MJXc-TeX-unknown-I {font-family: monospace; font-style: italic; font-weight: normal}
.MJXc-TeX-unknown-B {font-family: monospace; font-style: normal; font-weight: bold}
.MJXc-TeX-unknown-BI {font-family: monospace; font-style: italic; font-weight: bold}
.MJXc-TeX-ams-R {font-family: MJXc-TeX-ams-R,MJXc-TeX-ams-Rw}
.MJXc-TeX-cal-B {font-family: MJXc-TeX-cal-B,MJXc-TeX-cal-Bx,MJXc-TeX-cal-Bw}
.MJXc-TeX-frak-R {font-family: MJXc-TeX-frak-R,MJXc-TeX-frak-Rw}
.MJXc-TeX-frak-B {font-family: MJXc-TeX-frak-B,MJXc-TeX-frak-Bx,MJXc-TeX-frak-Bw}
.MJXc-TeX-math-BI {font-family: MJXc-TeX-math-BI,MJXc-TeX-math-BIx,MJXc-TeX-math-BIw}
.MJXc-TeX-sans-R {font-family: MJXc-TeX-sans-R,MJXc-TeX-sans-Rw}
.MJXc-TeX-sans-B {font-family: MJXc-TeX-sans-B,MJXc-TeX-sans-Bx,MJXc-TeX-sans-Bw}
.MJXc-TeX-sans-I {font-family: MJXc-TeX-sans-I,MJXc-TeX-sans-Ix,MJXc-TeX-sans-Iw}
.MJXc-TeX-script-R {font-family: MJXc-TeX-script-R,MJXc-TeX-script-Rw}
.MJXc-TeX-type-R {font-family: MJXc-TeX-type-R,MJXc-TeX-type-Rw}
.MJXc-TeX-cal-R {font-family: MJXc-TeX-cal-R,MJXc-TeX-cal-Rw}
.MJXc-TeX-main-B {font-family: MJXc-TeX-main-B,MJXc-TeX-main-Bx,MJXc-TeX-main-Bw}
.MJXc-TeX-main-I {font-family: MJXc-TeX-main-I,MJXc-TeX-main-Ix,MJXc-TeX-main-Iw}
.MJXc-TeX-main-R {font-family: MJXc-TeX-main-R,MJXc-TeX-main-Rw}
.MJXc-TeX-math-I {font-family: MJXc-TeX-math-I,MJXc-TeX-math-Ix,MJXc-TeX-math-Iw}
.MJXc-TeX-size1-R {font-family: MJXc-TeX-size1-R,MJXc-TeX-size1-Rw}
.MJXc-TeX-size2-R {font-family: MJXc-TeX-size2-R,MJXc-TeX-size2-Rw}
.MJXc-TeX-size3-R {font-family: MJXc-TeX-size3-R,MJXc-TeX-size3-Rw}
.MJXc-TeX-size4-R {font-family: MJXc-TeX-size4-R,MJXc-TeX-size4-Rw}
.MJXc-TeX-vec-R {font-family: MJXc-TeX-vec-R,MJXc-TeX-vec-Rw}
.MJXc-TeX-vec-B {font-family: MJXc-TeX-vec-B,MJXc-TeX-vec-Bx,MJXc-TeX-vec-Bw}
#font-face {font-family: MJXc-TeX-ams-R; src: local('MathJax_AMS'), local('MathJax_AMS-Regular')}
#font-face {font-family: MJXc-TeX-ams-Rw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_AMS-Regular.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_AMS-Regular.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_AMS-Regular.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-cal-B; src: local('MathJax_Caligraphic Bold'), local('MathJax_Caligraphic-Bold')}
#font-face {font-family: MJXc-TeX-cal-Bx; src: local('MathJax_Caligraphic'); font-weight: bold}
#font-face {font-family: MJXc-TeX-cal-Bw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Caligraphic-Bold.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Caligraphic-Bold.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Caligraphic-Bold.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-frak-R; src: local('MathJax_Fraktur'), local('MathJax_Fraktur-Regular')}
#font-face {font-family: MJXc-TeX-frak-Rw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Fraktur-Regular.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Fraktur-Regular.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Fraktur-Regular.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-frak-B; src: local('MathJax_Fraktur Bold'), local('MathJax_Fraktur-Bold')}
#font-face {font-family: MJXc-TeX-frak-Bx; src: local('MathJax_Fraktur'); font-weight: bold}
#font-face {font-family: MJXc-TeX-frak-Bw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Fraktur-Bold.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Fraktur-Bold.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Fraktur-Bold.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-math-BI; src: local('MathJax_Math BoldItalic'), local('MathJax_Math-BoldItalic')}
#font-face {font-family: MJXc-TeX-math-BIx; src: local('MathJax_Math'); font-weight: bold; font-style: italic}
#font-face {font-family: MJXc-TeX-math-BIw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Math-BoldItalic.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Math-BoldItalic.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Math-BoldItalic.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-sans-R; src: local('MathJax_SansSerif'), local('MathJax_SansSerif-Regular')}
#font-face {font-family: MJXc-TeX-sans-Rw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_SansSerif-Regular.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_SansSerif-Regular.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_SansSerif-Regular.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-sans-B; src: local('MathJax_SansSerif Bold'), local('MathJax_SansSerif-Bold')}
#font-face {font-family: MJXc-TeX-sans-Bx; src: local('MathJax_SansSerif'); font-weight: bold}
#font-face {font-family: MJXc-TeX-sans-Bw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_SansSerif-Bold.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_SansSerif-Bold.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_SansSerif-Bold.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-sans-I; src: local('MathJax_SansSerif Italic'), local('MathJax_SansSerif-Italic')}
#font-face {font-family: MJXc-TeX-sans-Ix; src: local('MathJax_SansSerif'); font-style: italic}
#font-face {font-family: MJXc-TeX-sans-Iw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_SansSerif-Italic.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_SansSerif-Italic.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_SansSerif-Italic.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-script-R; src: local('MathJax_Script'), local('MathJax_Script-Regular')}
#font-face {font-family: MJXc-TeX-script-Rw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Script-Regular.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Script-Regular.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Script-Regular.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-type-R; src: local('MathJax_Typewriter'), local('MathJax_Typewriter-Regular')}
#font-face {font-family: MJXc-TeX-type-Rw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Typewriter-Regular.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Typewriter-Regular.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Typewriter-Regular.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-cal-R; src: local('MathJax_Caligraphic'), local('MathJax_Caligraphic-Regular')}
#font-face {font-family: MJXc-TeX-cal-Rw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Caligraphic-Regular.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Caligraphic-Regular.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Caligraphic-Regular.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-main-B; src: local('MathJax_Main Bold'), local('MathJax_Main-Bold')}
#font-face {font-family: MJXc-TeX-main-Bx; src: local('MathJax_Main'); font-weight: bold}
#font-face {font-family: MJXc-TeX-main-Bw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Main-Bold.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Main-Bold.woff')format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Main-Bold.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-main-I; src: local('MathJax_Main Italic'), local('MathJax_Main-Italic')}
#font-face {font-family: MJXc-TeX-main-Ix; src: local('MathJax_Main'); font-style: italic}
#font-face {font-family: MJXc-TeX-main-Iw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Main-Italic.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Main-Italic.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Main-Italic.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-main-R; src: local('MathJax_Main'), local('MathJax_Main-Regular')}
#font-face {font-family: MJXc-TeX-main-Rw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Main-Regular.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Main-Regular.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Main-Regular.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-math-I; src: local('MathJax_Math Italic'), local('MathJax_Math-Italic')}
#font-face {font-family: MJXc-TeX-math-Ix; src: local('MathJax_Math'); font-style: italic}
#font-face {font-family: MJXc-TeX-math-Iw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Math-Italic.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Math-Italic.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Math-Italic.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-size1-R; src: local('MathJax_Size1'), local('MathJax_Size1-Regular')}
#font-face {font-family: MJXc-TeX-size1-Rw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Size1-Regular.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Size1-Regular.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Size1-Regular.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-size2-R; src: local('MathJax_Size2'), local('MathJax_Size2-Regular')}
#font-face {font-family: MJXc-TeX-size2-Rw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Size2-Regular.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Size2-Regular.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Size2-Regular.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-size3-R; src: local('MathJax_Size3'), local('MathJax_Size3-Regular')}
#font-face {font-family: MJXc-TeX-size3-Rw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Size3-Regular.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Size3-Regular.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Size3-Regular.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-size4-R; src: local('MathJax_Size4'), local('MathJax_Size4-Regular')}
#font-face {font-family: MJXc-TeX-size4-Rw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Size4-Regular.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Size4-Regular.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Size4-Regular.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-vec-R; src: local('MathJax_Vector'), local('MathJax_Vector-Regular')}
#font-face {font-family: MJXc-TeX-vec-Rw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Vector-Regular.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Vector-Regular.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Vector-Regular.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-vec-B; src: local('MathJax_Vector Bold'), local('MathJax_Vector-Bold')}
#font-face {font-family: MJXc-TeX-vec-Bx; src: local('MathJax_Vector'); font-weight: bold}
#font-face {font-family: MJXc-TeX-vec-Bw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Vector-Bold.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Vector-Bold.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Vector-Bold.otf') format('opentype')}
<span class="mjx-chtml"><span class="mjx-math" aria-label="_{a} ^{x} A "><span class="mjx-mrow" aria-hidden="true"><span class="mjx-msubsup"><span class="mjx-ba
se"><span class="mjx-mi"><span class="mjx-char"></span></span></span><span class="mjx-stack" style="vertical-align: -0.156em;"><span class="mjx-sup" style="font-size: 70.7%; padding-bottom: 0.255em; padding-left: 0px; padding-right: 0.071em;"><span class="mjx-texatom" style=""><span class="mjx-mrow"><span class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.225em; padding-bottom: 0.298em;">x</span></span></span></span></span><span class="mjx-sub" style="font-size: 70.7%; padding-right: 0.071em;"><span class="mjx-texatom" style=""><span class="mjx-mrow"><span class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I
" style="padding-top: 0.225em; padding-bottom: 0.298em;">a</span></span></span></span></span></span></span><span class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.519em; padding-bottom: 0.298em;">A</span></span></span></span></span>
from a working css file (generated by font-squirrel):
#font-face {
font-family: 'SnowTopCaps';
src: url('/fonts/snowtopcaps-webfont.eot');
src: url('/fonts/snowtopcaps-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/snowtopcaps-webfont.woff') format('woff'),
url('/fonts/snowtopcaps-webfont.ttf') format('truetype'),
url('/fonts/snowtopcaps-webfont.svg#snowtopcaps') format('svg');
font-weight: normal;
font-style: normal;
}
trying to declare in style section in jade document:
...
style
#font-face
font-family
| SnowTopCaps
src
| url('/fonts/snowtopcaps-webfont.woff') format('woff')
font-weight
| normal
font-style
| normal
...
but none of the style declaration is written to the generated html?
any anybody see what's missing here?
This syntax is for HTML, not for css.
Use
style.
#font-face {
font-family: 'SnowTopCaps';
src: url('/fonts/snowtopcaps-webfont.eot');
src: url('/fonts/snowtopcaps-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/snowtopcaps-webfont.woff') format('woff'),
url('/fonts/snowtopcaps-webfont.ttf') format('truetype'),
url('/fonts/snowtopcaps-webfont.svg#snowtopcaps') format('svg');
font-weight: normal;
font-style: normal;
}
Or use the :stylus filter