Вопрос по css, html – Выборочные стили резервных шрифтов без JavaScript?

3

Я видел несколько методов стилизации резервных шрифтов с помощью JavaScript: один от Google & Typekit, например, но мне любопытно, есть ли способ сделать это без JavaScript.

Например, я бы хотел использовать Arialheight:10px; и если у пользователя нет Arial, я хочу использовать Timesheight:24px; а если нет, то я хочу использовать синий шрифт san-serif. Хорошо, довольно абсурдный пример, но он показывает общий эффект, которого я добиваюсь.

Любая помощь будет с благодарностью!

Ваш Ответ

2   ответа
1

мощью JavaScript, пожалуйста, поделитесь им. (Есть способ получить список всех установленных шрифтов в JavaScript в IE, но я не знаю ни одного кросс-браузерного способа.)

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

Да, эта ссылка, конечно, не идеальное решение, но она будет работать с небольшим изменением настроек (хорошо, вероятно, много, и кросс-браузер будет в лучшем случае сомнительным). DACrosby
1

L для каждого браузера.

Вы можете использовать этот стек следующим образом:

font-family:your-google-font-name, arial, helvetica, freesans, sans-serif;

если javascript отключен в браузере, шрифты вернутся к arial, если arial не установлен, к hevetiva - и т. д.

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

С помощью javascript нет проблем с его незаметностью.

создайте html className с Jasvascript (я предпочитаю jQuery здесь):

(function($){

  $(document).ready(function(){

    $('html').addClass('withJS');

  });

}(jQuery));

Теперь вы можете установить разные стили с или без Javascript только в CSS.

установить разные высоты в зависимости от фактического использования семейства шрифтов (пример тега body)

var myFontFamily = $('body').css('fontFamily');

// Log to see whats the name you are working with:
console.log(myFontFamily);

if(myFontFamily == 'your-family-name-here'){
  $('body').css({fontSize: '20px' });
} else {
  // do something else...
}
«Обычно у вас есть запасные шрифты, которые ведут себя и выглядят почти одинаково». Это проблема, которую я пытаюсь преодолеть: что, если нет достаточно близких шрифтов, или если вы находите один подобный, он просто отличается настолько, что может сломаться твой сайт? Итак, в вашем примере я хочу стилизовать helvetica иначе, чем arial, иначе, чем «your-google-font-name», в зависимости от того, что видит пользователь. Ваш метод, если я не ошибаюсь, позволяет стилизовать, если JS включен или нет, но не в соответствии с используемым запасным шрифтом. Также,.css("fontFamily") возвращает все дерево шрифтов: не только использованное. Jsfiddle.net / U9uBS DACrosby
ты прав - я не нашел никакого решения для этого. но, может быть, эта статья может прояснить, как это может быть возможно с modernizr Webdesignerwall.com / учебники / CSS3-шрифт-лицо-дизайн-гид - это всего лишь запасной вариант браузера - но для производственных систем я бы пошел в этом направлении ... Thomas Fellinger

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