Статьи

Плагин FontFace jQuery

Апрель 2, 2019

Из-за безопасности траншей браузерные войны все еще ведутся. @font-face один из самых сложных фронтов войны.

Вы привыкли нуждаться в проприетарных расширениях для использования новых свойств CSS3 — мы можем справиться с этим. Однако даже закаленные ветераны могут оказаться не готовыми к тому, сколько кода для конкретного браузера требуется для успешной реализации @font-face . Время готовиться!

Готов? 

  @ font-face {
   семейство шрифтов: "BestFontEver";
   src: url ('file / path / filename.eot');
   формат src: local ('☺'), url ('file / path / filename.woff') ('woff'), формат url ('file / path / filename.ttf') ('trueetype'), url (' file / path / filename.svg # BestFontEver ') формат (' svg ');
 }

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

Хорошей новостью является то, что после регистрации шрифт можно использовать так, как мы всегда использовали font-family . Допустим, у нас есть шрифт без засечек: 

 #element, .elements { font-family: "BestFontEver", Helvetica, Arial, sans-serif; }

Итак, почему так много вариантов при регистрации?

Подведение итогов боевых действий

  • Файлы шрифтов .eot (или Embedded OpenType) принадлежат Microsoft, поэтому если вы хотите, чтобы BestFontEver появлялся в Internet Explorer, вам потребуется версия .eot .
  • Web Open Font Format, или .woff , — самый новый солдат в конфликте. Он был разработан Mozilla и поддерживается Firefox, Chrome, Opera и IE9.
  • Затем идут шрифты TrueType с расширением .ttf , которые Apple разработала в конце 1980-х годов. Эти шрифты поддерживаются Safari, Opera, Firefox и Chrome.
  • Формат SVG? Это предусмотрено для платформ, поддерживающих SVG, таких как устройства iOS: iPhone, iPad и все, что работает с Mobile Safari.
  • И что последняя запись в src ? local('') ? Это на тот случай, если у пользователя, просматривающего вашу страницу, уже установлен шрифт с именем BestFontEver. Он защищает ваш шрифт BestFontEver, не загружая их локальный шрифт. Этот метод был разработан Полом Айришем, поэтому вы можете проверить его объяснение, почему это хорошая идея .

Твой Супер Солдат

Так, что это оставляет тебя? Линии битвы прорисованы, но туман войны не скоро исчезнет. То, что вы хотите, — это способ быстро и легко размещать шрифты @font-face на ваших страницах.

Вот тут и приходит jQuery! Мы можем использовать плагин, чтобы быть нашим пехотинцем, пока сидим в штаб-квартире и ждем, пока браузеры сразятся с ним. Тогда все, что нам нужно сделать, это предоставить объект jQuery.css() . Плагин FontFace jQuery — это отличный способ применять шрифты к сайтам, которые вы не контролируете, быстро создавать прототипы шрифтов во время проектирования, предоставлять менее опытным разработчикам больший контроль или даже — если вы выберете — для готовых к работе страниц : 

  $ ("# element, .elements"). fontface ({
   fontName: "BestFontEver",
   fontFamily: ["Best Font Ever", "BestFontEver", "Helvetica, Arial, без засечек"],
   filePath: "/ _fonts /",
   fileName: "bestfontever-normal-webfont"
 });

Вот и все, и это длинная версия! Немного подправив плагин, мы можем уменьшить требования до следующего: 

  $ ("# element, .elements"). fontface ({
   fontName: "BestFontEver",
   fileName: "bestfontever-normal-webfont"
 });

Вы можете безопасно удалить детали fontFamily и по-прежнему определять стек следующим образом: 

  $ ("# element, .elements"). fontface ({
   fontName: "BestFontEver",
   fontStack: "Helvetica, Verdana, Arial, Sans-Serif",
   fileName: "bestfontever-normal-webfont"
 });

Чтобы избавиться от необходимости filePath подробности filePath , мы просто установили значение по умолчанию в плагине. Найдите объект по defaults в коде плагина: 

  по умолчанию = {
   filePath: "/ _fonts /", // измените это местоположение вашего каталога шрифтов

Вы по-прежнему можете предоставить любые одноразовые filePath вам нужны, но установка его в плагине заставляет его filePath и забывать.

Еще лучше, однако, если у вас есть шрифт, который имеет разные веса или стили, вы можете использовать их: 

 $("#element, .elements").fontface({ fontName : "BestFontEver", fontWeight : "bold", fileName : "bestfontever-bold-webfont" }); $("#element em").fontface({ fontName : "BestFontEver", fontStyle : "italic", fileName : "bestfontever-italic-webfont" });

Возьмите плагин и попробуйте сами!

Вы можете найти отличные бесплатные @font-face -ready на таких сайтах, как http://code.google.com/webfonts/ (для шрифтов TrueType), http://webfonts.info , http: //www.fontsquirrel. com / и http://www.fontspring.com/ .

И последний совет? Если вы абсолютно уверены, что на большой части вашей аудитории будет установлен ваш шрифт, вы можете использовать его обычное имя в стеке шрифтов для загрузки их локальной версии. Это на самом деле то, что мы сделали в нашем первом примере. Использование принятого имени — Best Font Ever — в вашем стеке шрифтов перед именем, которое вы ассоциируете с загруженной версией @font-face — BestFontEver — означает, что мы по умолчанию используем локальную версию, если она доступна. Если он не установлен, мы будем продвигаться вниз по нашему стеку, пока что-нибудь не залипнет, и, будем надеяться, это будет наш @font-face .

Мы на вашей стороне

Война ужасна, но с такими союзниками, как плагин @font-face jQuery, вы выиграете войну, прежде чем узнаете об этом!

31
Share: