Укажите размеры резервного шрифта в CSS? - PullRequest
Новая
       1

Укажите размеры резервного шрифта в CSS?

10 голосов
/ 12 мая 2011

Есть ли способ указать другой шрифт размеры для резервных шрифтов в CSS? Я хочу сделать что-то вроде этого (что, очевидно, не работает): 

div {
    font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
    font-size: 20px, 18px, 18px, 18px;
}

Идея заключается в том, что Arial Narrow будет отображаться с разрешением 20 пикселей, если он установлен пользователем; в противном случае браузер вернется к Arial в 18px, затем в Helvetica в 18px и т. д.

Или, можно ли использовать JS для достижения аналогичного эффекта?

Ответы [ 4 ]

5 голосов
/ 12 мая 2011

Я понимаю, что вы хотите, но я думаю, что ответ на ваш вопрос «Нет, это не может быть сделано в CSS», по крайней мере, не в CSS2.

Надеясь, что кто-то может доказать, что я неправ, потому что я тоже этого хочу: D

Полагаю, JS может сделать это, по крайней мере, до некоторой степени.Не уверен, что есть "этот шрифт установлен?"метод в JS, но вы можете сделать некоторые догадки на основе ОС и тому подобное.У меня нет опыта, извините.

Редактировать: некоторые быстрые поиски в Google дают несколько хитрых трюков с JS, хотя я еще не пробовал их.Например, http://remysharp.com/2008/07/08/how-to-detect-if-a-font-is-installed-only-using-javascript/

Еще одно редактирование, после еще нескольких поисков: я был вызван "кто-то должен предложить это": D.Кажется, спецификация CSS3 имеет «font-size-Adjust», который может быть использован здесь.Однако поддержка в браузерах, отличных от Firefox, может быть неоптимальной на момент написания этой статьи.Вот слово W3 об этом свойстве: http://www.w3.org/TR/WD-font/#font-size-adjust

1 голос
/ 30 ноября 2012

У меня была связанная проблема с использованием шрифтов CSS3, которые, очевидно, не работают в IE6-8.Резервный шрифт (Arial) намного больше шрифта по умолчанию.Обошел его аналогично mVChr, но обнаружив браузер.Не очень, но радости от необходимости поддерживать IE.Код (с JQuery): 

<script>
    $(document).ready(function() {
        //change font sizes in IE6-8 because they display Arial not Dincon
        if(navigator.userAgent.indexOf('MSIE 6') > -1 
         || navigator.userAgent.indexOf('MSIE 7') > -1 
         || navigator.userAgent.indexOf('MSIE 8') > -1) {
            $('.offending-class').css('font-size', '11px');
        }
    });
</script>
0 голосов
/ 09 ноября 2014

Если Arial Narrow отсутствует в некоторых браузерах, эти браузеры обычно принимают URL-адреса @ font-face, такие как 

@font-face {
    font-family: Arial Narrow;
    src: url(Arial Narrow.otf);
}

@ font-face Я нахожу работы во всех распространенных браузерах, кроме IE8 / IE9, если в Vista Vista нет Arial Narrow, например, я использую полноценный CSS для IE8 с новым шрифтомразмер 

<head>

<!--[if IE 7]>
	<link rel="stylesheet" type="text/css" href="css/ie7.css">
<![endif]-->
<!--[if IE 8]>
	<link rel="stylesheet" type="text/css" href="css/ie7.css">
<![endif]-->
<!--[if IE 9]>
	<link rel="stylesheet" type="text/css" href="css/ie7.css">
<![endif]-->
<!--[if IE 6]>
	<link rel="stylesheet" type="text/css" href="css/ie7.css">
<![endif]-->

</head>
0 голосов
/ 12 мая 2011

С помощью Javascript вы можете сделать интервал с заглавной буквой «А». Если Arial Narrow установлен, он будет иметь ширину 11 пикселей, в противном случае он будет иметь ширину больше этой. Вы можете проверить этот диапазон, а затем скрыть его, чтобы определить, что вы установили. 

a = document.createElement('span');
a.innerHTML = 'A';
a.style.display = 'inline';
a.style.fontFamily = '"Arial Narrow", Arial, Helvetica, sans-serif';
a.style.fontSize = '20px';
document.body.appendChild(a);
aw = a.offsetWidth;
a.style.display = 'none';
a.parentNode.removeChild(a);

if (aw > 11) {
    document.getElementById('yourDiv').style.fontSize = '18px';
} else {
    document.getElementById('yourDiv').style.fontSize = '20px';
}
...