Как бы в продолжение темы создания веб-сайта: столкнулся с одной проблемой...
Через 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 и "сожмет" его.
По крайней мере, у меня в последних версиях браузеров шрифт отображается как нужно теперь.
Какой способ лучше - я, честно говоря, не знаю. Я почему-то выбрал второй.
Через 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 и "сожмет" его.
По крайней мере, у меня в последних версиях браузеров шрифт отображается как нужно теперь.
Какой способ лучше - я, честно говоря, не знаю. Я почему-то выбрал второй.
Гениально! :) Спасибо, выручили!
ОтветитьУдалитьКруто.
ОтветитьУдалитьЯндекс браузер не поддерживает данное свойство, как быть?
ОтветитьУдалитьБез понятия. Я не пользуюсь яндекс-браузером.
Удалить