@ font-face IE9 font-weight не работает

Question 1

Я пытался встроить шрифт с помощью css @ font-face. И я хочу использовать его как полужирный шрифт. Но IE 9 не отображает жирный шрифт.

CSS

@font-face {
    font-family: Dauphin;
    src: url('dauphin.woff'),
         url('dauphin.ttf'),
         url('dauphin.eot'),
         url('dauphin.svg')
     ; /* IE9 */
     font-weight: normal;
}
.p {
     font-family: Dauphin;
     font-weight: 900;
}

css internet-explorer-9 font-face

0

cirtrus 29 Мар 2013 в 20:58

2

Какой вес шрифта в контейнерах шрифтов (dauphin.woff, .ttf, .eot, ...)? Раньше я видел только файлы встроенных шрифтов, содержащие шрифт с одним весом и стилем. Когда требуются несколько весов или стилей, используется другой набор файлов шрифтов для каждого варианта шрифта (.woff, .ttf, .eot, ...).

–

Matt Coughlin

29 Мар 2013 в 21:07

Вам нужно будет установить font-weight на 900 вместо нормального.

–

Ibu

29 Мар 2013 в 21:09

Файл шрифта - это обычный шрифт. Когда я устанавливаю font-weight 900, шрифт будет отображаться обычным шрифтом, а не жирным шрифтом.

–

cirtrus

29 Мар 2013 в 21:11

Но он работает и во всех других браузерах.

–

cirtrus

29 Мар 2013 в 21:23

@Cirtrus: IE не поддерживает использование font-weight, отличного от указанного в правиле @font-face.

–

Matt Coughlin

29 Мар 2013 в 22:36

Answer

IE не поддерживает использование font-weight, отличного от указанного в правиле @font-face.

Набор файлов шрифтов для каждого варианта шрифта

Обычно встроенный файл шрифта содержит версию шрифта только с одним весом и одним стилем. Когда требуется несколько вариантов шрифта, для каждого варианта шрифта используется другой набор файлов встроенных шрифтов. В приведенном ниже примере для упрощения используется только формат .woff. На практике также обычно используются .eot, .ttf и .svg.

@font-face {
    font-family: 'myFont';
    src: url('myFont.woff');
    font-weight: normal;
}
@font-face {
    font-family: 'myFont';
    src: url('myFontBold.woff');
    font-weight: bold;
}
...
p {
    font-family: myFont;
    font-weight: normal;
}
h2 {
    font-family: myFont;
    font-weight: bold;
}

Поддержка IE8

Однако в IE8 возникают проблемы с отображением, когда с семейством шрифтов связано более 1 или более 4 начертаний или стилей. Для поддержки IE8 используйте разные семейства шрифтов для каждого варианта шрифта.

@font-face {
    font-family: 'myFont';
    src: url('myFont.woff');
}
@font-face {
    font-family: 'myFont-bold';
    src: url('myFontBold.woff');
}
...
p {
    font-family: myFont;
}
h2 {
    font-family: myFont-bold;
}

Максимальная кросс-браузерная поддержка

Для оптимальной поддержки кроссбраузерности используйте следующий синтаксис:

@font-face {
    font-family: 'myFont';
    src: url('myFont.eot');
    src: url('myFont.eot?#iefix')
             format('embedded-opentype'),
         url('myFont.woff') format('woff'),
         url('myFont.ttf') format('truetype'),
         url('myFont.svg#svgFontName') format('svg');
}
@font-face {
    font-family: 'myFont-bold';
    src: url('myFontBold.eot');
    src: url('myFontBold.eot?#iefix')
             format('embedded-opentype'),
         url('myFontBold.woff') format('woff'),
         url('myFontBold.ttf') format('truetype'),
         url('myFontBold.svg#svgFontName') format('svg');
}
...
p {
    font-family: myFont;
}
h2 {
    font-family: myFont-bold;
}

7

Matt Coughlin 23 Сен 2013 в 22:39

Question 2