Горизонтальное масштабирование текста с использованием CSS - PullRequest
Новая
       31

Горизонтальное масштабирование текста с использованием CSS

2 голосов
/ 30 декабря 2011

Для нашего сайта мы выбрали стек шрифтов, состоящий из Женевы (шрифт Mac) и Tahoma (шрифт Win) с резервным копированием Arial и Helvetica. В идеале мы хотим, чтобы Женева (самая широкая из всех), Tahoma, Helvetica и Arial занимали одинаковое пространство на х слов (путем регулировки горизонтального расстояния). Скажем, 110% Tahoma это как 100% Женева.

Font stack- Geneva > Tahoma > Helvetica> Arial > sans

Есть ли лучший способ сделать это? Есть ли проблемы с таким подходом, как поддержка браузера? И если это так, то как реализовать это в CSS?

По сути, мы сделали это горизонтальное масштабирование в Photoshop / Illustrator - хотим реализовать то же самое для сайта, что и для текста. Я предполагаю, что это должно быть сделано довольно часто, но после долгого поиска - я не смог найти ни одного текущего ресурса, который решает проблему - результаты 2-3 лет не имеют никакого решения. Будучи новичком на сайте, я не могу опубликовать изображение скриншота фотошопа - все еще здесь для справки: http://sunriseondarkhorizons.blogspot.com/2011/12/screenshot.html

PS Вердана слишком широка, чтобы созерцать, хотя она ближе к Женеве в космическом плане.

Спасибо

1 Ответ

1 голос
/ 30 декабря 2011

Единственный инструмент, который у вас есть, это CSS-атрибут с межбуквенным интервалом, который увеличивает или уменьшает расстояние между символами в тексте. 

h1 {letter-spacing:2px}

AFAIK Нет проблем с кросс-браузерной совместимостью.

Но есть проблема с выяснением, когда «активировать» этот атрибут. Так как вы не можете знать, какой шрифт клиент будет использовать заранее, должна быть какая-то логика / селектор, который решает, следует ли применять правило межбуквенного интервала.

Я не верю, что есть способ CSS сделать это.

То, что вы, возможно, сможете сделать, используя JavaScript, чтобы выяснить, нужно ли увеличивать межбуквенный интервал: Создайте элемент

с заранее заданным словом, например, «test». Используя JavaScript, вы можете затем сравнить ширину элемента со списком предварительно вычисленных значений длины таких

для ваших разных шрифтов. В зависимости от результата вы добавляете или удаляете атрибут межбуквенного интервала.

Это хитрое / хакерское решение, но это лучшее, что я могу придумать, извините.

Ах! Нашел что-то:

Детектор шрифтов

...