Проблема со шрифтом в Safari, слишком жирный текст

Question

Когда я применяю стиль font-weight:bold, внешний вид шрифта в Safari слишком жирный по сравнению с другими браузерами. Я попробовал ниже css, как предлагалось на каком-то сайте, но все равно.

text-shadow: #000000 0 0 0px;

Скриншоты рендеринга текста:

Chrome

Safari

Вот мое заявление CSS:

p {

margin: 8px 5px 0 15px; 
color:#D8D2CE; 
font-size:11pt;  
letter-spacing:-1px; 
font-weight: bold;  
font-family: LektonRegular;  
}

@font-face {
font-family: 'LektonRegular';
src: url('myfonts/lekton-regular-webfont.eot');
src: url('myfonts/lekton-regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('myfonts/lekton-regular-webfont.woff') format('woff'),
     url(myfonts/lekton-regular-webfont.ttf)  format('truetype'),
     url('myfonts/lekton-regular-webfont.svg#LektonRegular') format('svg');
font-weight: normal;
font-style: normal;

}

Как это можно исправить?

Answer 1

Использование -webkit-font-smoothing: antialiased;

Трюк с текстовой тенью больше не работает.

Answer 2

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

Также обратите внимание, что визуализация текста может отличаться на разных платформах на системном уровне (например, Windows, Mac OS). Такие различия в порядке, и обычно их не нужно исправлять.

См. Также раздел о свойстве -webkit-font-smoothing .

Answer 3

Решения -webkit не решат серьезную проблему для многих шрифтов Google, пользовательских шрифтов и шрифтов, которые не имеют предустановленных значений.

Проблема в том, что вам нужно указать значение жирного шрифта в сильных тегах.

Это можно сделать двумя способами:

Вы можете включить их из Google Fontsили откуда ваш шрифт в заголовке;для этого требуется как обычный шрифт, так и шрифт полужирный, каждый из которых должен иметь разное значение веса шрифта, например, 400 обычных и 600 полужирных, например:

<link href="https://fonts.xxx.com/css?family=XXX:400,600" rel="stylesheet">

.ниже:

@font-face {
  font-family: 'XXX';
  font-style: normal;
  font-weight: 600;
  src: local('XXX SemiBold'), local('XXX-SemiBold'), 
  url...
}

Используйте любой шрифт вместо XXX.

Тогда также в сильном {font-weight:600;}

Answer 4

Я нашел решение для этой конкретной проблемы.На самом деле любое из вышеперечисленных решений не работает для меня.Поэтому начал проверять стили веб-набора по умолчанию, добавленные safari, и обнаружил, что -webkit-text-stroke-width был применен к телу со значением 0.5px .Я установил его на 0! Важный и решил проблему для меня.

Answer 5

Ни один из ответов здесь не работал для меня.Возможно, потому что я использую версию Windows Safari для тестирования.Мне пришлось включить жирный шрифт в мой CSS, чтобы решить эту проблему.В случае исходного вопроса ему нужно добавить следующее (обратите внимание, что оно использует то же имя семейства шрифтов)

@font-face {
font-family: 'LektonRegular';
src: url('myfonts/lekton-bold-webfont.eot');
src: url('myfonts/lekton-bold-webfont.eot?#iefix') format('embedded-opentype'),
     url('myfonts/lekton-bold-webfont.woff') format('woff'),
     url(myfonts/lekton-bold-webfont.ttf)  format('truetype'),
     url('myfonts/lekton-bold-webfont.svg#LektonRegular') format('svg');
font-weight: bold;
font-style: normal;
}

Это сработало во всех браузерах для меня.