Ошибка шрифта Safari, текст слишком смелый

Когда я применяю стиль 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;

}

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

Ответ 1

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

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

См. также тему о свойствах -webkit-font-smoothing.

Ответ 2

Используйте -webkit-font-smoothing: antialiased;

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

Ответ 3

Ни один из ответов здесь не работал у меня. Возможно, потому, что я использую версию Safari для тестирования Windows. Мне пришлось включить жирный шрифт в мой 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;
}

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

Ответ 4

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

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

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

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

<link href="#" onclick="location.href='https://fonts.xxx.com/css?family=XXX:400,600'; return false;" rel="stylesheet">

Или используйте исходный код и вставьте его в свой собственный CSS, как показано ниже:

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

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

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