Как сделать так, чтобы шрифты отображались одинаково в разных браузерах?

Я создаю веб-сайт для клиента, и мы надеялись использовать простой текст, а не изображения на панели навигации. Мы используем шрифт Century Gothic (я думаю, что этот шрифт доступен на большинстве ПК и Mac). Проблема в том, что в разных браузерах шрифт значительно отличается. В Chrome мы выглядели так, как хотим, но в Firefox текст меньше и смелее.

Помимо написания специфичного для браузера javascript для изменения свойств шрифта, есть ли другие варианты стандартизации способа отображения шрифтов в кросс-браузерном режиме. Возможно, какая-то библиотека или API? Может быть, дело в том, чтобы быть более конкретным в объявлении свойств шрифта? Честно говоря, я застрял и мне нужна помощь.

website-design fonts cross-browser

— Зак Лисобей
источник

Ответы:

Вы не собираетесь получать шрифты и некоторые другие вещи для одинаковой визуализации в разных браузерах. Обработка шрифтов - прекрасный пример. Я знаю, что Safari в Windows по какой-то причине любит выделять текст жирным шрифтом. К сожалению, так работает сеть. Разнообразие браузеров, операционных систем, мониторов, графических процессоров и т. Д. Означает, что существует потенциально тысячи или десятки тысяч различных способов просмотра веб-страниц человеком. Поэтому при создании wbe вы должны делать это, зная и ожидая, что ваш сайт не будет идеальным для всех. Это не печать. Это дикая дикая сеть.

— Джон Конде
источник

Да, кажется, что это несчастная реальность. Однако кажется, что для кого-то должна быть возможность написать кусок javaScript, который немного приблизил бы его к нормализации.

— Зак Лисобей

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

— Джон Конде

Эта статья (и другие в той же серии) объясняет проблемы очень подробно, если вам интересно. blog.typekit.com/2010/12/17/…

— paulmorriss

Выбрал ваш ответ как лучший. Вы говорите, что это не проблема кода, но, конечно, кто-то может написать код так, чтобы одна строка текста растягивалась до минимальной ширины в пикселях. Это само по себе значительно улучшило бы эту ситуацию. Он может проверить ширину рендеринга <p> и соответственно увеличить расстояние между буквами. Может быть?

— Зак Лисобей

@Zach - Вы можете наверняка преодолеть множество препятствий с помощью планирования и умного кодирования. Но в конце концов мы можем иметь только такой большой контроль. В принципе, если вы можете принять такие проблемы, как Safari в Windows и код вокруг всего остального, вы должны хорошо.

— Джон Конде

На самом деле есть метод встраивания шрифтов в ваш CSS. Это очень легко. Обратитесь к http://randsco.com/index.php/2009/07/04/p680 для получения дополнительной информации о том, как это сделать. Недостатком этого является то, что старые браузеры (до 7 и 3, я думаю ...) не поддерживают это. Но количество людей, использующих эти старые браузеры, быстро уменьшается, и все еще можно указать альтернативные шрифты, которые будут работать и обычно на большинстве ПК на всякий случай.

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

— Кеннет
источник

В заметке css обязательно используйте только те шрифты, которые не будут нарушать авторские права, если этот шрифт будет использован кем-то другим, как при использовании метода css этот файл шрифта доступен всем, кто имеет доступ к вашему веб-сайту.

— Кеннет

Этот метод Flash называется sIFR . У него есть свои плюсы и минусы.

— Джон Конде

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

— Кеннет

Как уже отмечали другие, мы не имеем тотального контроля. Но я думаю, что стоит упомянуть пару вещей, которые я считаю полезными для того, чтобы браузеры отображали вещи в целом одинаково. И то, и другое - это «возвращение к основам», что многие из вас уже делают, но я подумал, что стоит упомянуть, поскольку основа, на которой вы строите, часто настраивает вас на успех или провал ...

CSS Reset. Концепция проста: вы устанавливаете значения по умолчанию для тега HTML в таблице стилей, чтобы установить общую отправную точку для отображения HTML. Вот статья и пример: http://meyerweb.com/eric/tools/css/reset/

Декларация Doctype. http://htmlhelp.com/tools/validator/doctype.html

— ph33nyx
источник