Шрифты не отображаются равномерно в браузерах

Разные браузеры поддерживают разные форматы шрифтов:

Итак, вам нужно создать свой шрифт во всех форматах. Вы можете использовать Font Squirrel (спасибо, effectica).

И затем вы можете импортировать их следующим образом:

@font-face {
    font-family: 'Comfortaa Regular';
    src: url('Comfortaa.eot');
    src: local('Comfortaa Regular'), 
         local('Comfortaa'), 
         url('Comfortaa.ttf') format('truetype'),
         url('Comfortaa.svg#font') format('svg'); 
}

Это не единственный возможный путь. Вы можете найти более полную информацию по этому вопросу в блоге Пола Айриша.

Да и вообще, их внешний вид может немного отличаться в разных браузерах.

Все основные браузеры имеют немного разные механизмы/методы рендеринга шрифтов, и они имеют разное качество вывода рендеринга. Таким образом, ваши шрифты вряд ли будут «идеальными по пикселям» в разных браузерах, и появятся некоторые различия в качестве. Какой из них выглядит лучше всего, зависит от шрифта. У меня есть глифовый шрифт, который отлично смотрится в Chrome и IE, но выглядит немного размытым в Firefox...

В любом случае, есть небольшая хитрость, которая поможет вам заставить шрифты работать в IE, см. вторую строку src. Это необходимо, потому что, хотя добавление дополнительных форматов шрифтов обеспечивает поддержку каждого браузера, к сожалению, это вызывает проблемы в версиях IE до IE9. Эти старые браузеры видят все между первым URL-адресом ('и последним') как один запрос URL-адреса, поэтому не смогут загрузить шрифт. Этот хак заставляет браузер думать, что остальная часть свойства src является аргументами этой строки запроса, поэтому он ищет правильный URL-адрес и загружает шрифт:

@font-face {
    font-family: 'Sketch';
    src: url('../fonts/SketchRockwell.eot');
    src: url('../fonts/SketchRockwell.eot?#iefix') format('embedded-opentype'),
         url('../fonts/SketchRockwell.woff') format('woff'),
         url('../fonts/SketchRockwell.ttf') format('truetype'),
         url('../fonts/SketchRockwell.svg#countersoftfontRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Вышеприведенное взято из генератора @font-face Kit от Font Squirrel, доступ к которому можно получить по адресу http://www.fontsquirrel.com/fontface/generator. Там вы можете загрузить свой шрифт и преобразовать его в любой желаемый формат. Вы также можете управлять синтаксисом CSS, который он выводит, подмножать символы, чтобы уменьшить размер файла, и использовать дополнительные параметры для точной настройки шрифтов.

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

Каждый шрифт обычно имеет определенную цель дизайна и был создан для конкретной работы. Большинство коммерческих шрифтов не предназначены для просмотра на экране небольшого размера, поэтому во многих случаях имеет смысл зарезервировать эти @font-face для заголовков и продолжать использовать веб-безопасные шрифты, такие как Georgia и Lucida, для основного текста.

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

Вот отличный URL-адрес для создания встраиваемых пакетов шрифтов:

http://fontface.codeandmore.com/

Загрузите свой шрифт TTF или OTF, и он создаст для вас полный набор шрифтов с примерами реализации HTML и CSS.

Ваше здоровье!

Эдвард все сказал. Раньше Chrome сводил меня с ума из-за того, как он отображал определенные шрифты.

Если у вас есть файл шрифта, вы можете использовать font squirrel для создания кода, а также всех файлов шрифтов. что вам нужно для всех браузеров.