Отрегулируйте размер шрифта в зависимости от того, какой шрифт используется из стека шрифтов

Question

Я использую один из новых шрифтов Google API для заголовка на сайте. Это Yannone Kaffeesatz и довольно сжатый шрифт.

Мой стек шрифтов выглядит следующим образом:

    font-family: 'Yanone Kaffeesatz', arial, serif;

Это нормально, когда визуализируется шрифт Yannone Kaffeesatz, но если нет, Arial гораздо более открыт, и заголовок занимает две строки.

Мой вопрос:

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

Идеально поддерживается во многих браузерах.

Спасибо

Tom

Answer 1

Нет, это невозможно. Сложно и сложно найти фактический используемый шрифт из списка font-family даже в JavaScript - это невозможно в чистом CSS.

Если вы хотите пойти по пути JavaScript, здесь - это ссылка на умный метод для определения фактического семейства шрифтов в JavaScript.

Когда вы знаете, какой шрифт используется, легко настроить element.style.letterSpacing на требуемую сумму.

Answer 2

Одно свойство, которое слегка меняет размер шрифта в зависимости от шрифта, равно font-size-Adjust .Это CSS3, поддерживается только Firefox.

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

http://pieroxy.net/blog/2014/10/11/the_quest_for_a_condensed_web_font.html подробно изучает варианты сжатых шрифтов.Один из самых хитрых выводов - font-stretch: condensed, который, например, помогает получить доступ, например, Arial Narrow на окнах (с Office).