У меня здесь странная проблема ... Кажется, браузер Microsoft Edge не загружает шрифты, когда я использую @ font-face. Я проверил все свои компьютеры под управлением Windows 10 и Microsoft Edge.

Я проверил http://caniuse.com/#search=font%20face

В нем говорится, что font-face совместим с Edge, поэтому я не знаю, что происходит. В моем примере у меня есть только div и его параметр font.

CSS

@font-face{font-family:'Dosis';font-style:normal;font-weight:200;src:local('Dosis ExtraLight'), local('Dosis-ExtraLight'), url(http://fonts.gstatic.com/s/dosis/v4/RPKDmaFi75RJkvjWaDDb0vesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');}
@font-face{font-family:'Dosis';font-style:normal;font-weight:700;src:local('Dosis Bold'), local('Dosis-Bold'), url(http://fonts.gstatic.com/s/dosis/v4/22aDRG5X9l7obljtz7tihvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');}

HTML

div {
  font-family:'Dosis';
}

Живая версия

http://codepen.io/mariomez/pen/YwGGWy

7
justme 24 Дек 2015 в 14:44

4 ответа

Лучший ответ

Процедура:

Процедура, которую я выполнил для установки всех необходимых форматов, заключалась в том, чтобы найти, какой вес шрифта мне нужен для каждого шрифта, а затем загрузить его из Google Fonts. Затем с помощью https://everythingfonts.com/font-face (генератор шрифтов) я загрузил все форматы вместе с кодом CSS. Затем я включил их все в свой CSS и HTML.

CSS:

@font-face {
    font-family: 'JosefinSansLight';
    src: url('/fonts/JosefinSansLight.eot');
    src: url('/fonts/JosefinSansLight.eot') format('embedded-opentype'),
         url('/fonts/JosefinSansLight.woff2') format('woff2'),
         url('/fonts/JosefinSansLight.woff') format('woff'),
         url('/fonts/JosefinSansLight.ttf') format('truetype');
}

HTML (отрывок):

.testim{
font-family:'JosefinSansLight', sans-serif;
line-height:normal;
color:#969696;
font-size:1.2em;
}

Файлы: (папка моего домена) / шрифты

fonts/JosefinSansLight.eot
fonts/JosefinSansLight.eot
fonts/JosefinSansLight.woff2
fonts/JosefinSansLight.woff
fonts/JosefinSansLight.ttf
4
justme 27 Дек 2015 в 17:09

Я только что обнаружил, что если у вас локально установлен шрифт Google (например, если вы делали макет), край не будет отображать версию веб-шрифта. Я много читал, чтобы найти корень проблемы, и не видел, чтобы кто-то упоминал об этом.

Надеюсь, это поможет кому-то другому :)

5
user3747088 27 Июн 2016 в 03:03

Вы используете только формат WOFF2, который не поддерживается в Microsoft Edge.

WOFF2 Совместимость

Чтобы решить эту проблему, включите формат WOFF в свое объявление @font-face. Большинство современных браузеров поддерживает WOFF

Для максимальной поддержки браузера включите все возможные форматы.

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot');
    src: url('webfont.eot?#iefix') format('embedded-opentype'),
       url('webfont.woff2') format('woff2'),
       url('webfont.woff') format('woff'), 
       url('webfont.ttf')  format('truetype'),
       url('webfont.svg#svgFontName') format('svg');
}  
6
Shishir Morshed 24 Дек 2015 в 13:29