Как изменить размер шрифта и стиль запасного шрифта

0

Я использую шрифт "freestyle script" для стилизации заголовка моего сайта и Грузии в качестве резервного шрифта. Я загрузил "freestyle" webfontkit из белка, и я использую @font-face для отображения стиля заголовка. Все хорошо для браузеров, которые поддерживают @font-face, но для тех, которые не поддерживают @font-face, как браузер по умолчанию для старых версий Android, у меня возникла проблема.

Проблема в том, что с помощью скрипта freestyle я хочу сохранить

  h1
   {
    font-size:25px; 
    font-style:normal;
   }

но с моим резервным шрифтом (Грузия) я хочу сохранить

   h1
    {
      font-size:18px;
      font-style:italic;
    }

Одним из решений, которое я нашел в сети, было использование modernizr... http://webdesignerwall.com/tutorials/css3-font-face-design-guide, но я ищу более простое решение no-js, так как мой сайт уже используя много js перед загрузкой страницы и немного загружается из-за этого

Я нашел аналогичный вопрос о SO.. Выборочно стиль резервных шрифтов без JavaScript? но не было четкого ответа, кроме решения modernizr...

Было бы очень полезно, если бы кто-то мог решить какое-то решение этой проблемы.

... Заранее спасибо

  • 0
    Это настоящая проблема? Android поддерживает @font-face начиная с версии 2.2.
Теги:
fonts
font-face

3 ответа

0
Лучший ответ

Никакого подхода, который я знаю, не использует модернизатор. Вставьте его в голову вашего html. Не знаю, как люди могут жить без него. Чтобы сохранить его небольшим, используйте минимальную копию Модернизатора только с выбором для @font-face. Кроме того, если вы находитесь на сервере Apache, GZIP - ваш html, css и js, добавив короткий код кода в.htaccess. Это ускорит вас.

Затем выполните следующие действия:

.fontface h1
 {
  font-size:25px; 
  font-style:normal;
 }

ИЛИ оставить браузер в одиночку и просто выполните:

.no-fontface h1
 {
  font-size:18px; 
  font-style:italic;  
 }

Изображение 174551

Поделиться
  • 0
    Спасибо cab за отзыв о GZIP. Я знал о минимальном модернизаторе, но сомневался в его использовании ... Кажется, GZIP справится ... Теперь я пойду с Modernizer ... Слава :)
0

Если вы не хотите использовать Modernizr, я написал автономную проверку, что 2.2KB минимизирует и добавляет класс в тег HTML, поэтому укажите, поддерживается ли @font-face. Затем вы можете настроить свои стили так же, как с помощью Modernizr:

.fontfacerender h1
{
  /* special font */
}

.no-fontfacerender h1
{
  /* default font */
}
Поделиться
  • 0
    Спасибо, RoelN. Я попробую.
0

Невозможно обнаружить поддержку шрифтов без JS. Самый простой способ, безусловно, использовать modernizr, как предложено, или проверить эту статью Paul Irish.

Поскольку @font-face имеет неплохую поддержку для настольных браузеров, я пойду на конечность и предполагаю, что вам понадобится резерв для мобильных браузеров. Если это возможно, вы должны изучить обнаружение на стороне сервера для мобильных браузеров (см. Этот вопрос).

Наконец, вы можете попробовать испортить свойство font-size-adjust (документы и статьи MDN). Я никогда не использовал его раньше, и я не могу понять, насколько хорошо поддерживается в браузерах, поэтому вам нужно будет провести некоторое тестирование.

Поделиться
  • 0
    Спасибо Teo за некоторые действительно хорошие ссылки ... Я думал, что font-size-Adjust будет именно тем, что я искал, но, увы, он поддерживается только FF. Я могу жить без выделения курсом моего сайта для небольшого набора браузеров, не поддерживающих @ font-face, но font-size-Adjust был необходим ... Я хотел бы, чтобы он был поддержан всеми браузерами ... ne, спасибо еще раз .. SO горные породы

Ещё вопросы

Сообщество Overcoder
Наверх
Меню