Кросс-браузерная совместимость шрифтов CSS

Question

Я прочитал кучу учебных пособий по перекрестной совместимости css, в которых упоминались листы сброса css и некоторые другие методы, но мне еще не удалось создать веб-сайт, шрифт которого будет выглядеть одинаково в нескольких браузерах.Я переключился с pt на px и включил несколько других техник, которые немного помогли.Кто-нибудь знает какие-нибудь лучшие методы?

Спасибо

Answer 1

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

Лучше бы использовать @font-face и некоторые сгенерированные шрифты.

Проверьте FontSquirrel, который создает отдельные файлы шрифтов для нескольких браузеров.

http://www.fontsquirrel.com/fontface

Answer 2

typekit может быть решением для вас, помимо уже упомянутых.

https://typekit.com/

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

е.е font-family: "Super Font", Helvetica, sans-serif;

Если вы выбрали шрифт «Super Font», пользовательский компьютер не будет отображать этот точный шрифт, потому что он может не иметь его на своем компьютере. Как заявлено в вашем CSS, пользовательский компьютер теперь будет смотреть на альтернативный «Helvetica», который есть у большинства компьютеров на их компьютере, так что «Helvetica» будет отображаться. Если даже «Helvetica» недоступна, на компьютере пользователя будет отображаться шрифт без засечек.

Вот список распространенных шрифтов: Ссылка

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

Если вы хотите использовать свой «Super Font», взгляните на http://www.fontsquirrel.com/fontface, как уже рекомендовал Джейсон Дженнаро. Там вы сможете не только выбрать шрифт из множества бесплатных шрифтов, но и использовать генератор @ font-face, чтобы загрузить свой собственный шрифт и получить все необходимое, чтобы встроить его прямо в свой CSS, чтобы каждая машина могла иметь возможность отображать их (если поддерживается @ font-face, Link ). Даже если он уже хорошо поддерживается, всегда объявляйте запасной шрифт.

А вот хороший пост в блоге о различных способах объявления размера шрифта: Ссылка

Если вы хотите покопаться немного глубже и узнать, как управлять размером шрифта на разных устройствах, ознакомьтесь с этой статьей: Ссылка

Answer 3

Я не знаю, насколько точно вы говорите, но это никогда не будет точно (с точностью до пикселя) одинаково в каждом браузере.Например, я заметил, что OS X имеет тенденцию делать шрифты шире (из-за того, как он сглаживает текст), чем в Windows.Различные браузеры отображают шрифты, даже один и тот же шрифт, немного по-разному, что иногда может достигать нескольких пикселей в зависимости от вашего макета.