Размер шрифта CSS изменяется, когда семейство шрифтов возвращается

Question

Я хочу использовать шрифт (gill sans), который отображается очень маленьким из-за короткой x-высоты и т.д. указан в семействе шрифтов, резервный шрифт очень большой - могу ли я установить размер шрифта в соответствии со шрифтом, который использует браузер?

Answer 1

У меня была та же проблема с использованием Calibri (немного меньше по сравнению с большинством без шрифтов). В итоге я сделал следующее (предполагается, что у вас есть jquery):

1. Получить скрипт обнаружения шрифта Реми Шарпа http://remysharp.com/2008/07/08/how-to-detect-if-a-font-is-installed-only-using-javascript/

2. Добавьте следующее к функции $(document).ready():

   $(document).ready(function() {
       font.setup();
       if(!font.isInstalled('Calibri'))
           $('body').css('font-size','87.5%');
   });
   

Так что теперь, если у пользователя нет Calibri, мы видим Arial на уровне 87,5%. Это применимо только к элементам, где размер шрифта не был определен / унаследован. Везде, где явно указан размер шрифта, необходимо будет также настроить его (возможно, добавьте класс к этим элементам и измените селектор jquery на $('.adjustClass')).

Было бы неплохо, если бы вы могли просто сделать: font:11px Calibri, 10px Arial; - но не повезло:)

Answer 2

Несколько недель назад была написана интересная статья, посвященная этой теме.

Вы можете прочитать статью здесь: http://kilianvalkhof.com/2009/css-xhtml/combining-cufon-and-font-face/

Короче говоря, статья использует несколько методов ... @ font-face для модернизированных браузеров, скрипт обнаружения шрифтов jQuery и Cufon для замены шрифтов в случае сбоя предыдущих методов.

Это не идеальное решение. И, как говорили многие выше меня, лучше всего использовать шрифт, который изящно ухудшается.

Попробуйте установить для ваших шрифтов стеки что-то вроде «GillSans, Calibri, Trebuchet, Sans-Serif» - для копирования абзаца, или «GillSans, Требушет, Калибри, без засечек» - для названий и заголовков

Answer 3

Я бы порекомендовал вам попробовать указать каскадные шрифты, которые постепенно изнашиваются, когда шрифты недоступны, например,

Arial, FontThatsLikeArial, FontThatsALittleLikeArial, FontThatsALittleLessLikeArial, Sans-serif;

В качестве альтернативы, если вы хотите жестко контролировать свои шрифты, взгляните на cufon, который не требует от ваших пользователей каких-либо плагинов и работает в большинстве современных браузеров. http://wiki.github.com/sorccu/cufon/about

Answer 4

Я бы порекомендовал вам использовать типичные шрифты, которые встречаются на большинстве (/ всех) компьютерах, которые обращаются к создаваемому вами веб-сайту. Вид веб-сайта не должен отличаться из-за браузера (проблемы, связанные с IE, являются другой темой ...). Используйте общие шрифты или альтернативы, которые работают аналогично ...

Answer 5

можно ли установить размер шрифта в соответствии со шрифтом, который использует браузер?

К сожалению, нет, не в CSS.

Answer 6

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

body { font-size: 62.5%; }

62,5% - хорошая базовая линия, поскольку она позволяет вам легко использовать ems для относительной установки размера шрифта элементов в теле.

При 62,5%, 1em = 10px, 1.2em = 12px и т. Д.

Просто установите размер шрифта в теле как базовые элементы и элементы стиля соответственно.