Webfonts used in font backup in IE8

I am currently trying to embed webfonts on the site I am creating, I want to use it as a reserve in the font-family attribute, i.e. if the character is not represented in Arial / Helvetica, then it must be in the used webfont.

I understand that this will not work in IE6 and 7, but expected it to work in IE8, which also doesn't seem.

I'm just wondering if anyone had experience with this problem, and if using webfont as a backup font is possible in IE8, or if someone can just see that I'm just doing something wrong in the code.

Thanks in advance for any help

Here is my css code:

@font-face {
    font-family: 'stix';
    src: url('/webfonts/webfont.eot');
    src: local('☺'), url('/webfonts/webfont.woff') format('woff'), url('/webfonts/webfont.ttf') format('truetype'), url('/webfonts/webfont.svg#webfont3hGwcDt1') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'stix';
    src: url('/webfonts/bold-webfont.eot');
    src: local('☺'), url('/webfonts/bold-webfont.woff') format('woff'), url('/webfonts/bold-webfont.ttf') format('truetype'), url('/webfonts/bold-webfont.svg#webfontJse4ZhT8') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'stix';
    src: url('/webfonts/talic-webfont.eot');
    src: local('☺'), url('/webfonts/italic-webfont.woff') format('woff'), url('/webfonts/italic-webfont.ttf') format('truetype'), url('/webfonts/italic-webfont.svg#webfonthDLBqRGk') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'stix';
    src: url('/webfonts/bold_italic-webfont.eot');
    src: local('☺'), url('/webfonts/bold_italic-webfont.woff') format('woff'), url('/webfonts/bold_italic-webfont.ttf') format('truetype'), url('/webfonts/bold_italic-webfont.svg#webfontnuMlJc7x') format('svg');
    font-weight: bold;
    font-style: italic;

}

body { font-family: arial, helvetica, clean, stix, sans-serif}
body.ie6 #content, body.ie6 .popup { font: 15px/1.6em stix; }
+3
source share
5 answers

( - ) ( webfont, STIX, , , ), : , ( bolditalic).

.. ( 100% ), STIX , arial:

@font-face {
    font-family: 'stix';
    src: url('stixgeneral-webfont.eot');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'stix';
    src: url('stixgeneralbol-webfont.eot');
    font-weight: bold;
    font-style: normal;
}
body {font-family: arial, stix, sans-serif;}

... 100% ( !):

@font-face {
    font-family: 'stix';
    src: url('stixgeneral-webfont.eot');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'stix';
    src: url('stixgeneralitalic-webfont.eot'); /* note - italic font variant */
    font-weight: normal;
    font-style: italic;
}
body {font-family: arial, stix, sans-serif;}

, STIX .

, STIX FontForge - FontForge . , FontSquirrel. .

+2

STIX ?

UA , , , webkit https://gist.github.com/478344 , IE , @font-face, CSS.

, STIX , , IE . STIX , , .

+3
+2

, " Internet Explorer 8 URL".

, , @font-face fall-back, , , "arial, helvetica", - , sans-serif. , sans-serif , Arial Windows Helvetica OS X ..

0

Btw... IE SVG-, EOT src svg! ( IE).

0

Source: https://habr.com/ru/post/1795792/


All Articles