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

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

Ответы

Ответ 1

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

Получить обнаружение шрифтов Remy Sharp script http://remysharp.com/2008/07/08/how-to-detect-if-a-font-is-installed-only-using-javascript/

Добавьте в функцию $(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; - но нет такой удачи:)

Ответ 2

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

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

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

Ответ 3

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

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

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

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

Попробуйте установить свои стеки шрифтов на что-то вроде "GillSans, Calibri, Trebuchet, sans-serif" - для копии абзаца или "GillSans, Trebuchet, Calibri, sans-serif" - для титулов и заголовков

Ответ 4

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

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

Ответ 5

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

Ответ 6

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

body { font-size: 62.5%; }

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

В 62,5%, 1em = 10px, 1.2em = 12px и т.д.

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