@ font-face проблема с весом шрифта в Safari - PullRequest
Новая
       64

@ font-face проблема с весом шрифта в Safari

8 голосов
/ 30 марта 2010

Я только начал использовать @ font-face Это поверх моей css 

@font-face {
  font-family: Avenir;
  src: url(../fonts/AvenirLTStd-Medium.otf);
}
body{
 font-family:"Avenir",Helvetica;
 background:#fff url(../images/main_bg.png) repeat-x scroll 0 0;
 color:#321244;
}

и у меня есть это ниже для меню на Joomla 

#menu_bottom ul li a {
font-size:12px;
font-weight:600;
letter-spacing:-0.6px;
text-transform:uppercase;

это в HTML-файле 

<li class="item23"><a href="/index.php?option=com_user&amp;view=login&amp;Itemid=13&amp;lang=en"><span>Menu Item</span></a></li>

Это работает в Firefox, но он не работает корректно в Safari или Chrome, шрифт правильный, но вес шрифта не работает, я проверил на инструменте разработчика Google-Chrome и вычисленный вес шрифта равен 600. Я пробовал использовать 100 или 900, результаты на Safari и Chrome совпадают, вес шрифта не изменится.

Что-то не так с моим объявлением font-face поверх моего css-файла?

Должен ли я попробовать добавить что-то вроде этого 

@font-face {
  font-family: Avenir;
  src: url(../fonts/AvenirLTStd-Heavy.otf);
  font-style: bold;
}

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

AJensonPro-BoldIt.otf         AvenirLTStd-BookOblique.otf
AJensonPro-Bold.otf           AvenirLTStd-Book.otf
AJensonPro-It.otf             AvenirLTStd-HeavyOblique.otf
AJensonPro-LtIt.otf           AvenirLTStd-Heavy.otf
AJensonPro-Lt.otf             AvenirLTStd-LightOblique.otf
AJensonPro-Regular.otf        AvenirLTStd-Light.otf
AJensonPro-SemiboldIt.otf     AvenirLTStd-MediumOblique.otf
AJensonPro-Semibold.otf       AvenirLTStd-Medium.otf
AvenirLTStd-BlackOblique.otf  AvenirLTStd-Oblique.otf
AvenirLTStd-Black.otf         AvenirLTStd-Roman.otf

Или я должен попробовать другой формат шрифта, который не является otf, в IE, кажется, работает, хотя ширина больше. Мне все еще нужно это исправить.

Ответы [ 3 ]

10 голосов
/ 30 марта 2010

Как объяснено здесь , вы должны добавить 

font-weight: normal;
font-style: normal;

внутри объявления @ font-face и затем используйте font-weight:600; на вашем якоре.

1 голос
/ 30 марта 2010

Указание числового значения для font-weight - это то, что вы делаете на свой страх и риск. Разные браузеры по-разному интерпретируют значения, а некоторые вообще ничего не интерпретируют. Лучше всего использовать стандартный "жирный шрифт" ... который браузеры получают наиболее близким к сопоставлению каким-либо полуоднородным способом. Кроме того, если вы используете собственные шрифты, вы должны быть уверены, что ваши пользователи используют их в своих системах. Кроме того, некоторые пользовательские шрифты не очень хорошо реагируют на искусственное «жирное» свойство. У них будет именованное «жирное» лицо, такое как Авенир Болд, Авенир Блэк, Авенир Демиболд, Авенир Демибольд Конденсированный и т.д.

Кроме того, всегда включайте достаточно запасных шрифтов, включая, наконец, общий спецификатор шрифта «serif», «sans-serif» или «monospace».

0 голосов
/ 12 апреля 2016

Лучше поздно, чем никогда. Надеюсь, это поможет: 

html { -webkit-font-smoothing: antialiased; }
...