Изменение размера шрифта на основе шрифта-семейства с помощью jQuery

Я пытаюсь использовать Myriad Pro в качестве основного шрифта с Arial и, например, отступать так:

font: 13px "Myriad Pro", "Helvetica", "Arial", "sans-serif"; 

Я хочу resize шрифта при выборе Arial или Helvetica. Это то, что у меня есть в jQuery, но это не работает:

 $(function(){ if ($("body").css("font") == "Arial") { $("body").css("font", "10px"); }; }); 

Я ценю ваше время, помощь и щедрость 🙂

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 . Если вы измените свойство font , вы будете перезаписывать как размер шрифта, так и ваши семейства шрифтов.

Все, что я читал на этой странице, до сих пор пугает меня! Меня беспокоят мерцающие размеры текста, странное поведение браузера, несоосность по всему месту из-за условий гонки с другими размерами элементов на основе размеров.

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

Я придумал быстрый и грязный тестер шрифта. Просто вставьте его вверху своей веб-страницы в и щелкните имя шрифта, чтобы переключиться на этот шрифт. Проверьте его на Mac + PC + iPad и в зависимости от того, какие браузеры вам необходимо поддерживать. Просто удалите шрифты из списка шрифтов, которые резко нарушают ваш дизайн.

Помните, если у вас есть части вашей страницы, которые являются более критичными, попробуйте использовать Arial для этих разделов.

 
  • Segoe UI Medium
  • Segoe UI
  • Trebuchet MS
  • Trebuchet
  • Lucida Grande
  • Tahoma
  • Arial
  • Sans-Serif

Проверьте это на JSFiddle.com <- нажмите на красные имена шрифтов в нижнем правом окне

очень простая функция jquery:

 function changeFont(element, fontFamily, fontSize) { var hh = $(element).height(); $(element).css("font-family", fontFamily); if ($(element).height() != hh) $(element).css("font-size", fontSize); } 

образец :

 changeFont("body", "B Koodak, B Nazanin, Tahoma", "13pt"); 

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

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

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

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

Пример:

    

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non purus et tortor rhoncus ultricies.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non purus et tortor rhoncus ultricies.

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

   

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

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

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

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

  • Как встроить шрифты в CSS?
  • Принудительное сглаживание с использованием css: Это миф?
  • Пользовательские шрифты и XML-макеты (Android)
  • Android - Использование пользовательского шрифта
  • Использование шрифтов с конвейером Rails
  • Можно ли настроить собственный шрифт для всего приложения?
  • Ярлык для изменения размера шрифта в Eclipse?
  • Как установить семейство шрифтов по умолчанию для всего Android-приложения
  • Получить шрифт каждой строки с помощью PDFBox
  • Как resize шрифта JLabel, чтобы взять максимальный размер
  • Не удалось декодировать загруженный шрифт
  • Давайте будем гением компьютера.