Я заметил значительную разницу в воспроизведении Open Sans (веб-шрифта Google) из Chrome в Safari/Firefox. Прикрепляю две фотографии, первая хром, вторая сафари.
Все, что у меня есть в таблице стилей, это:
font-family: 'Open Sans', sans-serif;
font-size:14px;
Надеюсь, вы можете помочь, так как мне очень нравится хром (первое изображение), но НЕНАВИЖУ другое!!
В прошлом мне везло, когда я использовал font-weight: lighter!important; для шрифтов, которые кажутся более жирными и полностью отличаются от того, как они должны выглядеть. Каждый браузер интерпретирует шрифты по-своему. Google Web Fonts изо всех сил старается предоставлять правильные версии, но иногда между браузерами и операционными системами происходят радикальные изменения.
Надеюсь, эта информация поможет! Дайте мне знать, если это решение работает, в противном случае я могу изучить его дальше. Open Sans — хороший шрифт для веба, хороший выбор :)
Добавить в голову
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,300' rel='stylesheet' type='text/css'>
правило CSS
.btn{
font-family: 'Open Sans', sans-serif;
font-weight:300;
text-rendering: optimizeLegibility;
font-size: .9em;
}
Я добавил прямо эту строку в свой заголовок, и она работает!
<link href='//fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet' type='text/css'>
.nav > li > a {
color: #000; font-size: 13px; font-weight: 600;
}
Вместо того, чтобы просто вызывать шрифт без размеров в заголовке и затем определять его как полужирный, метод, который не работает.
Существует проблема, из-за которой Safari отображает шрифты фиксированного размера, а другие браузеры отображают их более точно:
Таким образом, если вы запросите, чтобы ваш текст был размером между двумя шагами Safari, вы получите результат в Safari не такой, как в других браузерах.
Таким образом, в зависимости от того, как вы объявляете размеры шрифта и размер окна, вы получите результаты разного размера.
Этот обходной путь помог мне сделать так, чтобы Open Sans выглядел очень близко в разных браузерах.
<script>
function loadCss(path){
var fileref=document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", path);
document.getElementsByTagName("head")[0].appendChild(fileref);
}
if (ViewUtil.isChromeBrowser()) {
loadCss('https://fonts.googleapis.com/css?family=Open+Sans:400,600');
} else {
loadCss('https://fonts.googleapis.com/css?family=Open+Sans:300,600');
}
we are forcing a bit 'bolder' version of font for chrome
Вы, по-видимому, не сбросили CSS браузера по умолчанию, попробуйте явно установить вес шрифта.
