Вопрос по font-family, css, html, font-size – Отрегулируйте размер шрифта в зависимости от того, какой шрифт используется из стека шрифтов

7

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

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

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

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

Мой вопрос:

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

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

Спасибо

Том

Это обман, но я не могу найти оригинал Pekka 웃
Оригинальный дубликат, вероятно, вот этот:Изменение размера шрифта тела на основе семейства шрифтов с помощью jQuery Lode
Вы можете добавить обнаружение пользовательского агента на основе сервера, а затем обслуживать другую страницу (или просто CSS). ИМО это единственное несколько элегантное решение. У Google есть список браузеров и версий, которые гарантированно работают. Если это в основном статический текст, вы можете просто использовать PNG. user479870

Ваш Ответ

2   ответа
0

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

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

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

4

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

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

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

Спасибо за ваш ответ. У меня было чувство, что это так. Возможно, мне придется пересмотреть мой стек. Я мог бы сделать что-то с переполнением или позволить ему изящно работать по нескольким строкам. TDH

Похожие вопросы