Вопрос по css, html – Выборочные стили резервных шрифтов без JavaScript?
Я видел несколько методов стилизации резервных шрифтов с помощью JavaScript: один от Google & Typekit, например, но мне любопытно, есть ли способ сделать это без JavaScript.
Например, я бы хотел использовать Arialheight:10px; и если у пользователя нет Arial, я хочу использовать Timesheight:24px; а если нет, то я хочу использовать синий шрифт san-serif. Хорошо, довольно абсурдный пример, но он показывает общий эффект, которого я добиваюсь.
Любая помощь будет с благодарностью!
мощью JavaScript, пожалуйста, поделитесь им. (Есть способ получить список всех установленных шрифтов в JavaScript в IE, но я не знаю ни одного кросс-браузерного способа.)
Обратите внимание, что страница, на которую вы ссылаетесь, не использует резервные шрифты; скорее он загружает шрифт динамически (и в той степени, в которой вы можете это сделать, резервные шрифты теряют значение).
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...
}
.css("fontFamily") возвращает все дерево шрифтов: не только использованное. Jsfiddle.net / U9uBS
DACrosby