Я использую Google Web Font PT-sans
font-family: 'PT Sans',Arial,serif;
но он выглядит по-иному в Chrome и Firefox
Есть ли что-нибудь, что мне нужно добавить, чтобы оно выглядело одинаково во всех браузерах?
Шрифты выглядят по-разному в Firefox и Chrome
Ответ 1
Сброс CSS может решить проблему, я не уверен.
Ответ 2
Для шрифта ChunkFive из FontSquirrel, указав "font-weight: normal;" остановил рендеринг Firefox с похожим на задницу при использовании в заголовке. Похоже, что Firefox пытался применить подделку полужирным шрифтом, который имеет только один вес, в то время как Chrome не был.
Ответ 3
Для меня веб-шрифты Chrome выглядят crappy, пока я не поместил шрифт SVG впереди WOFF и TrueType. Например:
@font-face {
font-family: 'source_sans_proregular';
src: url('sourcesanspro-regular-webfont.eot');
src: url('sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg'),
url('sourcesanspro-regular-webfont.woff') format('woff'),
url('sourcesanspro-regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Даже тогда хром-шрифты выглядят тоньше, чем в Firefox или IE. Chrome выглядит хорошо на данный момент, но я обычно хочу установить разные шрифты в IE и Firefox. Я использую смесь условных комментариев IE и jQuery для установки разных шрифтов в зависимости от браузера. Для Firefox у меня есть следующая функция при загрузке страницы:
function setBrowserClasses() {
if (true == $.browser.mozilla) {
$('body').addClass('firefox');
}
}
Тогда в моем CSS я могу сказать
body { font-family: "source_sans_proregular", Helvetica, sans-serif; }
body.firefox { font-family: "source_sans_pro_lightregular", Helvetica, sans-serif; }
Аналогично, в таблице стилей только для IE, включенных в условные комментарии IE, я могу сказать:
body { font-family: "source_sans_pro_lightregular", Helvetica, sans-serif; }
Ответ 4
Есть несколько исправлений. Но обычно это можно зафиксировать с помощью:
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Иногда это может быть связано с font-weight. Если вы используете собственный шрифт с @font-face, убедитесь, что ваш синтаксис font-weight верен. В @font-face идея свойств font-weight/font-style заключается в том, чтобы сохранить ваше имя font-family в разных объявлениях @font-face при использовании разных font-weight или font-style, чтобы эти значения корректно работали в CSS (и загрузка ваш пользовательский шрифт - не "поддельный жирный" ).
Я видел, что -webkit-text-stroke: 0.2px; упомянул утолщение шрифтов webkit, но я думаю, что вам, вероятно, это не понадобится, если вы используете первый фрагмент кода, который я дал.
Ответ 5
Я заметил, что хром, как правило, делает шрифты более четкими, а firefox - более гладкими. Вы ничего не можете с этим поделать. удачи
Ответ 6
Чтобы избежать различий шрифтов в браузерах, избегайте использования стилей CSS, чтобы изменить внешний вид шрифта. Использование свойства font-size обычно безопасно, но вы можете избегать выполнения таких действий, как font-weight: bold; вместо этого вы должны загрузить жирную версию шрифта и присвоить ему другое имя семейства шрифтов.
Ответ 7
По состоянию на 2014 год Chrome по-прежнему имеет известную ошибку, если в случае использования используемого webfont установлена локальная копия, она предпочитает использовать локальную версию и, следовательно, вызывает проблемы с OP-рендерингом.
Чтобы исправить это, вы можете сделать следующее:
Во-первых, выберите Chrome Browser или OSX (для меня проблема была только в OSX Chrome). Я использовал этот простой JS для быстрого обнаружения браузера/ОС, вы можете сделать это любым другим способом, которым вы привыкли:
https://raw.github.com/rafaelp/css_browser_selector/master/css_browser_selector.js
Теперь, когда вы можете настроить таргетинг на браузер/ОС, создайте следующий "новый" шрифт:
@font-face {
font-family: 'Custom PT Sans';
src: url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/jKK4-V0JufJQJHow6k6stALUuEpTyoUstqEm5AMlJo4.woff) format('woff');
font-weight: normal;
font-style: normal;
}
URL-адрес шрифта совпадает с вашим браузером при встраивании веб-сайта google. Если вы используете какой-либо другой шрифт, просто скопируйте и измените URL-адрес соответствующим образом.
Получить здесь URL http://fonts.googleapis.com/css?family=PT+Sans:400,700&subset=latin,latin-ext
Вы также можете переименовать свой псевдоним шрифта семейства шрифтов @font-face.
Создайте простое правило CSS для использования этого шрифта для браузера/ОС или обоих:
.mac .navigation a {
font-family: "Custom PT Sans", "PT Sans", sans-serif;
}
Или
.mac.webkit p {
font-family: "Custom PT Sans", "PT Sans", sans-serif;
}
Готово. Просто примените правило семейства шрифтов, где вам нужно.
Ответ 8
Различные браузеры (и FWIW, разные ОС) используют разные механизмы рендеринга шрифтов, и их результаты не должны быть идентичными. Как уже указывалось, вы ничего не можете с этим поделать (если, конечно, вы не можете заменить текст изображениями или флэш-памятью или реализовать свой собственный рендеринг с помощью javascript + canvas - последний будет немного за бортом, если вы спросите меня).
Ответ 9
Я нашел, что это отлично работает:
-webkit-text-stroke: 0.7px;
или
-webkit-text-stroke: 1px rgba(0, 0, 0, 0.7);
экспериментировать со значением "0,7", чтобы приспособиться к вашим потребностям. Строки добавляются, когда вы определяете шрифт bodys.
вот пример:
body {
font-size: 100%;
background-color: #FFF;
font-family: 'Source Sans Pro', sans-serif;
margin: 0;
font-weight: lighter;
-webkit-text-stroke: 0.7px;
Ответ 10
У меня была такая же проблема в течение нескольких месяцев. Наконец, это сработало, отключив указанные ниже настройки в настройках браузера Chrome.
Установите "Ускоренный 2D-холст" на "Отключено" (В адресной строке браузера перейдите в chrome://flags # disable-accelerated-2d-canvas, измените настройку, перезапустите браузер.)
Поскольку исправление для этой проблемы явно изменилось, я бы предложил отключить любые аппаратно-ускоренные функции рендеринга текста /2D-рендеринга в будущем, если это исправление перестанет работать.
В Google Chrome 55 эта проблема, похоже, снова возникла. Как и ожидалось, исправление отключало аппаратное ускорение, оно просто меняло местоположение.
Новое исправление (для меня) выглядит так:
Настройки → Показать дополнительные настройки... → Система UNCHECK "Использовать аппаратное ускорение, когда доступно"