Изменение Размера шрифта Тела на основе Семейства шрифтов с jQuery

JavaScript не имеет официально поддерживаемого способа обнаружения шрифтов, но эта библиотека является подходящим решением: http://www.lalit.org/lab/javascript-css-font-detect

Используя этот детектор, вы затем можно использовать:

$(function(){
  var fontDetector = new Detector();
  if(fontDetector.test('Arial')){
    $('body').css('font-size', '10px');
  }
});

Также обратите внимание, что вам следует изменить только свойство font-size . Если вы измените свойство шрифта , вы перезапишете и размер шрифта, и семейства шрифтов.

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

Что вы можете сделать, так это измерить размер элемента, содержащего текст, и на основании этого определить, какой шрифт может использоваться для визуализации текста.

(Рассмотрите также то, что пользовательские настройки размера шрифта также могут повлиять на его отображение.)

Мое решение похоже на то, что предлагает @Guffa, но я бы создал несколько других, возможно, даже скрытых, если это работает во всех браузерах, контейнерах с одинаковым текстом. Используйте классы, чтобы установить для шрифта различные комбинации - один с Myriad Pro, другой без него. Сравните высоту этих двух контейнеров. Если они такие же, значит, вы знаете, что они отображаются с использованием резервных шрифтов. В Safari 4 я получаю 16 и 15.

Пример:

<style type="text/css">
    .myriad {
        font: 13px "Myriad Pro", "Helvetica", "Arial", "sans-serif";
            display: none;
    }
    .arial {
        font: 13px "Arial", "sans-serif";
            display: none;
    }
</style>
<script type="text/javascript" language="javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var mHeight = $('.myriad').height();
    var aHeight = $('.arial').height();

    alert( 'M: ' + mHeight + ' ' + 'A: ' + aHeight );
});
</script>

<p class="myriad">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla non purus et tortor rhoncus ultricies.
</p>
<p class="arial">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla non purus et tortor rhoncus ultricies.
</p>

if($("body").css("font-family").indexOf("Arial") > -1 
   || $("body").css("font-family").indexOf("Helvetica") > -1) {
   $("body").css("font-size", "12px");
}

Работает отлично. Я не знаю, почему парень, который опубликовал это, решил удалить его ..

Редактировать: NickFitz прав, поскольку он действительно не работает. Глупый я, был взволнован и не заметил неправильных изменений, которые он вносил.

Пример от tvanfosson действительно работает. Вам нужно будет использовать ширину вместо высоты, чтобы сравнить шрифты. Вы также захотите сделать второй шрифт списка шрифтов arial (или любой другой резервный шрифт, который вы хотите использовать). После этого просто сравните ширину, и если они одинаковы, вы узнаете, что в обоих случаях используется arial:

<style type="text/css">
    .segoeUI
    {
        font: 13px "Segoe UI" , "Arial", "sans-serif";
        display: none;
    }
    .lucidaGrande
    {
        font: 13px "Lucida Grande" , "Arial", "sans-serif";
        display: none;
    }
    .arial
    {
        font: 13px "Arial" , "sans-serif";
        display: none;
    }
</style>

<script type="text/javascript">
    $(document).ready(function() {
        var sWidth = $('.segoeUI').width();
        var aWidth = $('.arial').width();
        var lWidth = $('.lucidaGrande').width();

        alert('Segoe: ' + sWidth + ' Arial: ' + aWidth + ' Lucida: ' + lWidth);
    });
</script>

Я использую это, чтобы при желании загрузить другую таблицу стилей, которая будет использовать другой размер шрифта, если segoe не доступный. Причина в том, что пользовательский интерфейс segoe слишком мал на 11 пикселей, а два других шрифта слишком большие на 12 пикселей. Поскольку Segoe UI и Lucida Grande лучше читаются, я стараюсь использовать их в первую очередь. Сравнивая их с arial, я знаю, присутствуют ли они в системе, благодаря tvanfosson.