28 марта 2013 г.

Что делать, если Arial Narrow не работает в Firefox?

Как бы в продолжение темы создания веб-сайта: столкнулся с одной проблемой...

Через CSS определил главным шрифтом для некоторых элементов Arial Narrow. В Google Chrome и IE10 -  все отлично. Открываю сайт в Firefox - а Arial у меня никакой не Narrow (не узкий)!

Оказывается, Firefox его не поддерживает. (И по словам некоторых, не обязан, так как шрифт не системный, не у всех будет на клиенте, нас просто Microsoft разбаловала.)

Но мне именно этот шрифт нужен. Что же делать?


Конечно, можно закинуть шрифт себе на сайт и подгружать его пользователю, если у него шрифта такого нет, через правило в CSS:

@font-face
{
  font-family: "Arial Narrow";
  src: local("Arial Narrow"),
    url(fonts/arialn.ttf )
}

Но я пошел другим путем.

Можно использовать font-stretch: condensed или font-stretch: ultra-condensed для элемента, где указан Arial.

.fancyFont
{
  font-family: "Arial Narrow", Arial, sans-serif;
  font-stretch: ultra-condensed;
}

То есть, может браузер отобразить Arial Narrow - отобразит. Не может - возьмет следующий по порядку Arial и "сожмет" его.

По крайней мере, у меня в последних версиях браузеров шрифт отображается как нужно теперь.

Какой способ лучше - я, честно говоря, не знаю. Я почему-то выбрал второй.

4 комментария:

  1. Гениально! :) Спасибо, выручили!

    ОтветитьУдалить
  2. Яндекс браузер не поддерживает данное свойство, как быть?

    ОтветитьУдалить
    Ответы
    1. Без понятия. Я не пользуюсь яндекс-браузером.

      Удалить