Looking at the source for the Microsoft Edge homepage, the page's stylesheet is loaded as:-
<link rel="stylesheet" type="text/css" href="https://c.s-microsoft.com/en-gb/CMSStyles/style.csx?k=eb892833-0e5a-b8c0-2921-57013ef132d9_f05cbaf8-1aa4-2e42-0beb-040a76f09433_e688a192-b2e5-4598-dec4-9340a1bb6723_6e5b2ac7-688a-4a18-9695-a31e8139fa0f_b3dad3e4-0853-1041-fa46-2e9d6598a584_fc29d27f-7342-9cf3-c2b5-a04f30605f03_a66bb9d1-7095-dfc6-5a12-849441da475c_1b0ca1a3-6da9-0dbf-9932-198c9f68caeb_ef11258b-15d1-8dab-81d5-8d18bc3234bc_11339d5d-cf04-22ad-4987-06a506090313_176b8afa-bab9-e793-c91f-d22b5a134b6e_8031d0e3-4981-8dbc-2504-bbd5121027b7_3f0c3b77-e132-00a5-3afc-9a2f141e9eae_aebeacd9-6349-54aa-9608-cb67eadc2d17_0cdb912f-7479-061d-e4f3-bea46f10a753_343d1ae8-c6c4-87d3-af9d-4720b6ea8f34_a905814f-2c84-2cd4-839e-5634cc0cc383_190a3885-bf35-9fab-6806-86ce81df76f6_9a16c79d-25f5-bdfe-5f2f-db073a7c44a9_e35b6b5f-66da-dedc-3f00-745165d9153a_469a8551-3011-f265-8b8f-5929dc69c497_788198f9-9eef-398f-9683-0cfdba85933d_bfafe587-a6ac-831e-ddf2-924fd9c72cdf_cab08b69-d2f0-1170-14b6-3c3a28953f9f" />
Digging further into the source for style.csx, the syntax of the file is scss like, for example:-
#mixin font-face($family, $set, $weight, $locals: (), $version: latest){
$local-fonts: '';
#if $supports-local == true {
#each $item in $locals {
$local-fonts: #{$local-fonts} + 'local("' + #{$item} + '"),';
}
}
#font-face {
font-family: 'wf_' + #{$family} + '_' + #{$weight};
src: url('//i.s-microsoft.com/fonts/#{$family}/#{$set}/#{$weight}/#{$version}.eot');
src: #{$local-fonts} +
url('//i.s-microsoft.com/fonts/#{$family}/#{$set}/#{$weight}/#{$version}.eot?#iefix') format('embedded-opentype'),
url('//i.s-microsoft.com/fonts/#{$family}/#{$set}/#{$weight}/#{$version}.woff') format('woff'),
url('//i.s-microsoft.com/fonts/#{$family}/#{$set}/#{$weight}/#{$version}.ttf') format('truetype'),
url('//i.s-microsoft.com/fonts/#{$family}/#{$set}/#{$weight}/#{$version}.svg#web') format('svg');
font-weight: normal;
font-style: normal;
}
}
Google didn't lead me to anything which seems to pertain to csx in this context - this isn't C# and doesn't seem to relate to a jquery plugin called csx which processes css files.
So, what exactly is a csx file in this context? Does it require javascript client side processing (the page renders fine in Chrome) and is there any benefit to csx used this way over, for example, pre-compiled scss?
In this case .CSX is almost certainly C# scripting. What you are seeing is the generated output of that script NOT the source of the file style.csx
Related
Given the element :
<span>一、對話 Dialogues</span>
One of my font is really unelegant on that side, adding an overly wide space :
Is there a css rule to style only the punctuation 、 ?
NB: I searched the web and found nothing. Currently assume only HTML elements can receive styles. So I have to use JS to get the string, then str.replace('、','<span class="punt">、</span>'), then put back the string with the dedicated html element and class. But I would like to ask the community and create this question, even if dumb, so other users may find this question/answer in the future.
You could use #Font-face and Unicode range to style your punctuation with an other font.
First, identify your characters' code :
var charcode = '、'.codePointAt(0).toString(16); // "3001"
alert(charcode) // "3001"
Then, load your default font and your support font with unicode range
/* For general characters *********************************** */
#font-face {
font-family: 'MyFont';
font-style: normal;
font-weight: 400;
src: local('Font1onPC'), /* tries to load local font file */
url('https://fonts.gstatic.com/font.woff2') format('woff2'),
url('https://fonts.gstatic.com/font.woff') format('woff');
}
/* For special characters ********************************** */
#font-face {
font-family: 'MyFont'; /* IMPORTANT: same name*/
src: local('Font2onPC'), /* tries to load local font file */
url('https://fonts.gstatic.com/anotherFont.woff2') format('woff2'),
url('https://fonts.gstatic.com/anotherFont.woff') format('woff');
unicode-range: U+3001; /* IMPORTANT */
}
Should work.
Source : https://jakearchibald.com/2017/combining-fonts/
Alternatively, you could edit that font on this character.
:root {
--icon-url: '//at.alicdn.com/t/font_126288_147h8m0m5se5ewmi';
}
#font-face {
font-family: 'iconfont';
src: url(var(--icon-url)'.eot');
src: url(var(--icon-url)'.eot?#iefix') format('embedded-opentype'), url(var(--icon-url)'.woff') format('woff'), url(var(--icon-url)'.ttf') format('truetype'), url(var(--icon-url)'.svg#iconfont') format('svg');
}
Module not found: Error: Can't resolve './var(--icon-url' in 'Users/xxx/xxx'
if you want to specify a URL in a custom property, you need to write out the entire url() expression, and substitute that entire expression:
:root {
--url: url("https://download.unsplash.com/photo-1420708392410-3c593b80d416");
}
body {
background: var(--url);
}
CSS variable not supported in src or src's url.
Found this considerably after the fact, but you tagged this as sass in addition to css. In SASS, you CAN include this as a variable. You have to pass the variable with special syntax, though.
Instead of just $url you have to pass it like so: #{$url}. Then SASS will know to include the string directly.
Example:
/* Set variable in SASS (will not be CSS variable) */
$icon-url: '//at.alicdn.com/t/font_126288_147h8m0m5se5ewmi';
#font-face {
font-family: 'iconfont';
src: url('#{$icon-url}.eot');
src: url('#{$icon-url}.eot?#iefix') format('embedded-opentype'),
url('#{$icon-url}.woff') format('woff'),
url(var(--icon-url)'.ttf') format('truetype'),
url('#{$icon-url}.svg#iconfont') format('svg');
}
Mind you, at this point, you could just use woff2 and woff, so this may be less needed.
See https://caniuse.com/mdn-css_at-rules_font-face_woff
:root {
--icon-url: url('//at.alicdn.com/t/font_126288_147h8m0m5se5ewmi');
}
here is the page where I want to add custom font http://pgkweb.ru/temp/1/index.html
So the fonts are:
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadProCondRegular.ttf
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadProCondRegular.woff
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadProCondRegular.otf
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadPro-Cond.eot
And I call them from css (http://pgkweb.ru/temp/1/include/style.css):
/*FONTS*/
#font-face {
font-family: MyriadProCond;
src: url(include/MyriadProCondRegular/MyriadProCondRegular.ttf); /* Путь к файлу со шрифтом */
src: url(include/MyriadProCondRegular/MyriadProCondRegular.woff);
src: url(include/MyriadProCondRegular/MyriadProCondRegular.otf);
src: url(include/MyriadProCondRegular/MyriadPro-Cond.eot);
}
*, body, p,h3,h4 {
font-family: 'MyriadProCond', Arial, sans-serif;
color: #fff;
}
But as I see in FireFox code explorer it doesn't works (line-through). But why?
Your webfonts are inside the "include" folder, as is the stylesheet, i.e. they are both in the same folder, so you have to erase the folder name from the file path in the links, like:
src: url("MyriadProCondRegular/MyriadProCondRegular.ttf");
instead of
src: url("include/MyriadProCondRegular/MyriadProCondRegular.ttf");
the same with all the other URLs
Seems like you are missing quotes around each url, the syntax is also a little off:
#font-face {
font-family: MyriadProCond;
src: url('include/MyriadProCondRegular/MyriadPro-Cond.eot');
src: url('include/MyriadProCondRegular/MyriadProCondRegular.woff') format('woff'), /* Путь к файлу со шрифтом */
url('include/MyriadProCondRegular/MyriadProCondRegular.ttf') format('truetype'),
url('include/MyriadProCondRegular/MyriadProCondRegular.otf') format('otf');
}
See here: https://css-tricks.com/snippets/css/using-font-face/
If this doesn't work, check that the URLs are correct and the fonts are being downloaded (no 404 errors in the network tab).
In CSS, I'm linking to two local fonts. Only one is being recognized currently and I really have no idea what I'm doing wrong.
#font-face {
font-family: 'The Rainmaker';
src: url('The Rainmaker.otf');
}
#font-face {
font-family: 'Timeline';
src: url('Timeline.ttf');
}
I have a problem with printing web fonts from Google chrome v 18 but it works totally fine with IE and Firefox, I am using CSS file to pass the web fonts and the code for it is as follows.
#font-face {
font-family: 'C39P24DmTtNormal';
src: url('WebFonts/v100025_-webfont.eot');
src: url('WebFonts/v100025_-webfont.eot?#iefix') format('embedded-opentype'),
url('WebFonts/v100025_-webfont.woff') format('woff'),
url('WebFonts/v100025_-webfont.ttf') format('truetype'),
url('WebFonts/v100025_-webfont.svg#C39P24DmTtNormal') format('svg');
font-weight: normal;
font-style: normal;
}
Issue Screen-Shot:
Image Description:
In the above screen-shot all the ones marked in red are the bar-codes provided by the web fonts in CSS file but while printing are shown as above.
I tried to search on Google, but it seems to be a possible bug with Chrome and they are trying to fix it as soon as they can.
Is there any kind of workaround that can help me as I don't want my clients to install the fonts on each and every computer they use to browse my web application.
Put .svg at the start of the sources and try with different formats, like .svg as truetype:
#font-face {
font-family: 'EnzoOT-Medi';
src: url('font.eot');
src: url('font.svg') format('truetype'),
url('font.eot?#iefix') format('embedded-opentype'),
url('font.woff') format('woff'),
url('font.ttf') format('truetype'),
url('font.svg') format('svg');
font-weight: normal;
font-style: normal;
}
I also had the same problem of disabled print preview from the settings but the problem in Google Chrome. It does not allow the web fonts to get loaded before printing, so just enable it back.
If you are using Windows.print on body.onLoad then remove that as its the real cause of the problem. This is only supported by Internet Explorer and not Google Chrome.
Example:
<body onload="window.print();">
Remove the onload and I hope it does the trick. If you have tried this then I am sorry.
In my case it was due to the use of relative font-size in vw. I put a rule in #media print {} with size in pt and worked perfect. The funny thing was that it was only happening in Chrome.
The real fix for this issue is to not load the webfonts async on preformatted print pages. Doing so you can still use window.onload = window.print() to force the print dialog without any issues.
<script>
WebFontConfig = {
typekit: { id: 'xxxxxx' }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js';
wf.type = 'text/javascript';
wf.async = 'false';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>