Кросс-браузер

Я использую шрифт "Signika" для своего веб-приложения. Дизайн представлен в файлах Adobe Illustrator, где они использовали шрифт "Signika Semibold" .

Первый метод:

Я применил font-family: Signika Semibold, но он работает полужирным шрифтом только в Chrome. Firefox и IE отображают текст в нормальном весе шрифта.

JS Fiddle

HTML

<p class="semi">
  Abcd Efgh
</p>

CSS

.semi{
  font-family:'Signika Semibold';
  font-size:14px;
}

Второй метод:

Я применил font-family: Signika и дал font-weight: 500 для полужирного. Однако он выглядит как полужирный вместо Полуболовое в Chrome.

JS Fiddle

HTML

<p class="weight">
  Abcd Efgh
</p>

CSS

.weight{
  font-family:'Signika';
  font-weight:500;
  font-size:14px;
}

Есть ли способ обхода проблемы?

Ответ 1

Решение

Используемые шрифты Google с требуемыми стилями: Обычный (400), полужирный (600), полужирный (700))

Ссылка шрифта Google

Импортировал шрифт, включив этот код в раздел HEAD HTML

<link href='https://fonts.googleapis.com/css?family=Signika:700,400,600' rel='stylesheet' type='text/css'>

Затем в CSS,

Для обычного

font-weight:400;

Для полужирного

font-weight:600;

Для жирного

font-weight:700;

Используя этот метод, шрифты во всех браузерах выглядят одинаково.

Ответ 2

Некоторые скриншоты были бы потрясающими. Шрифты, как правило, выглядят более тяжелыми в браузерах Webkit, потому что они используют sub-pixel antialiasing для сглаживания шрифтов. Попробуйте установить -webkit-font-smoothing: antialiased;, и он должен выглядеть так, как он выглядит в других браузерах.

Посмотрите на эту страницу для получения более подробной информации.

Существует предостережение об использовании этого: Как правило, вы должны позволить браузеру справиться с этим. Вы заметите, что на странице MDN это нестандартная функция.

Если вам интересно, как эти различные методы сглаживания производят разные результаты, проверьте это.

Ответ 3

Собственно, ваш второй JSFiddle имел:

font-weight: 600;

Вместо 500. Здесь обновлена ваша скрипка.

http://jsfiddle.net/gbj7b1jp/1/

Теперь он не выделен жирным шрифтом.

Ответ 4

Полуболовое слово usaly font-weight:400;

Однако при сканировании укажите свойства шрифта при импорте шрифтов с @font-face:

@font-face {
    font-family: Signika;
    src: url(SignikaLight.otf);
    font-style: normal;
    font-weight: 100;
}

@font-face {
    font-family: Signika;
    src: url(SignikaRegular.otf);
    font-style: normal;
    font-weight: 300;
}

@font-face {
    font-family: Signika;
    src: url(SignikaSemibold.otf);
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: Signika;
    src: url(SignikaBold.otf);
    font-style: normal;
    font-weight: 600;
}

Ответ 5

Это известная проблема в CSS. В браузерах веб-браузеров было плохо при внедрении шрифтов шрифта в книге: они в основном не могут найти конкретную версию веса, кроме полужирного. Обходной путь состоит в том, чтобы включать информацию в фамилию шрифта, даже если это не то, как должны работать вещи. Вы можете взглянуть на эту ссылку (работает только в IE) и определить наилучшее соответствие стиля шрифта из списка - это просто взломать эту проблему. http://www.cs.tut.fi/~jkorpela/listfonts.html