От автора: приветствуем вас на страницах блога Webformyself. В этой статье я хотел бы ответить на вопрос, как задать шрифт в html. Кое-кто все еще делает это неправильным образом, поэтому очень важно разобраться с вопросом более тщательно.
Как задавали шрифт раньше
Ранее в html использовался специальный парный тег font, который выступил как контейнер для изменения параметров шрифта, таких, как гарнитура, цвет и размер. Сегодня такой подход является в корне неверным. Почему? Веб-стандарты определяют, что внешний вид страницы не должен прописываться в html-разметке. К тому же, тег поддерживается полноценно только в очень старой версии HTML – HTML 3.
Задание шрифта в html правильным образом
Сегодня для этой цели стоит использовать исключительно возможности css. Этот язык как раз и создан для того, чтобы определять через него внешний вид. К тому же в css намного больше свойств, которые влияют на внешний вид текста. Рассмотрим понемногу каждое из них:
Font-style. Определяет начертание текста. Принимает такие значения:
Font-variant. Свойство назначает, как нужно интерпретировать написание строчных букв. Имеет всего два значения:
Normal – обычное поведение.
Small-caps – все строчные буквы преобразовываются в заглавные, а их размер немного уменьшается по сравнению с обычным шрифтом.
Font-weight. Определяет жирность текста. Значение можно задавать ключевыми словами или числовым значением. Давайте рассмотрим все варианты:
Normal – обычный текст
Bold – текст с жирным начертанием
Bolder – будет выводиться жирнее, чем он выводится у родительского элемента.
Lighter – буквы получат меньше жирности, по сравнению с родителем.
Вот так все просто. Кроме этого, есть возможность задавать значение в виде чисел от 100 до 900, где 900 – самый жирный. К примеру, значению normal соответствует 400, а bold – 700.
К сожалению, большинство браузеров не распознают этих числовых значений и могут применять всего два значения – normal и bold. Для эксперимента я создал 9 абзацев и задал каждому разную жирность текста – от 100 до 900. Потом открыл эту веб-страничку в разных браузерах и ни один не отобразил разные начертания. Вывод: лучше не применяйте числовые значения.
Font-size. Это свойство задает размер букв. Размер можно задавать в различных относительных и абсолютных величинах. Чаще всего размер задается в пикселах, относительных единицах em и процентах. Если вы хотите подробнее ознакомиться с заданием размера в css, то почитайте эту , где все описано более подробно.
Font-family. Пожалуй, самое основное свойство, которое определяет семейство или конкретное имя используемого шрифта. Если вы используете конкретное название, то нужно убедиться, что заданный шрифт найдется на компьютерах всех пользователей. Для надежности через запятую нужно прописать альтернативный вариант или целое семейство. Шрифты подразделяются на такие семейства:
Каждое семейство подходит под разные потребности. Например, с помощью fantasy часто оформляют различные заголовки, а monospace используются для вывода машинного кода и т.д. Конкретнее узнать названия шрифтов вы можете, например, в текстовом редакторе или в фотошопе.
Сокращенная запись
Все то, что мы рассмотрели выше, можно очень легко записать по сути в одну строчку с помощью замечательного свойства font, которое собирает вместе все настройки. Записывать нужно в такой последовательности:
Font: font-style | font-variant | font-weight | font-size | font-family;
Font : font - style | font - variant | font - weight | font - size | font - family ; |
Если какой-то параметр вам указывать не нужно, то он просто опускается. Обязательными здесь являются только размер и семейство шрифта, все остальное указывать необязательно, если в этом нет необходимости. Использование сокращенной записи позволяет сильно сократить код в css. Пользуйтесь ею, потому что это хорошая оптимизация для работы сайта.
Как задать шрифт в html разным элементам
Так, что-то мы сильно увлеклись описанием всех свойств для шрифта. Это очень важная информация, но как вообще его правильно задавать? Используйте нужные селекторы, чтобы дотянуться до нужных элементов. Дальше я предлагаю несколько примеров:
p a{ font-family: Verdana, sans-serif; }
Для табличных данных задается много параметров шрифт: уменьшенные прописные буквы, жирное начертание, размер и название шрифта.
Вам попался капризный заказчик, требующий «расписные» шрифты? Или вы просто создаете стильный тематический сайт, и кастомное написание текста подчеркнет вашу авторскую идею? Рассмотрим один из способов решения данной задачи.
Когда бывает нужно
Для начала рассмотрим наиболее оправданные случаи, в которых Вам могут понадобиться нестандартные шрифты.
- Стильное меню.
- Стильные заголовки .
- Логотип. Создание логотипа – дело серьезное, много книг по этому поводу написано, долго специалисты этому делу обучаются… И автор не станет отбирать у людей их хлеб, но вставит свои пять копеек. Если ваш логотип представляет собой текст, то в целях качественной SEO оптимизации выводить его следует как ТЕКСТ.
Задача заключается в использовании нестандартных шрифтов, то есть таких, которые со значительной долей вероятности отсутствуют у пользователя вашего интернет-ресурса.
Пути решения
Как и в большинстве случаев, любое задание имеет несколько путей решения, и наше – не исключение. Поехали:
- Картинка. Отсутствует гибкость настройки, ухудшается скорость загрузки страниц, увеличивается нагрузка на сервер, SEO вообще не при делах.
- Flash. Дополнительные файлы для загрузки, нужны навыки работы в Flash-эдиторах (параметры текста менять тоже здесь), средняя SEO.
- JS. Дополнительные внешние файлы (и все, что из этого вытекает), средняя SEO, текст невозможно скопировать.
- Нестандартные font-ы средствами CSS
Истинный путь самурая, или "да здравствует CSS"
В решении поставленной задачи нам поможет css правило @font-face, которое позволяет подгружать к документу специфические шрифты и определить их настройки.
@ font- face { font- family: AlexBrush- Regular; src: local("AlexBrush-Regular" ) , url("./AlexBrush-Regular. otf " ) ; }
Таким образом мы исключаем необходимость наличия выбранного нами шрифта в ОС посетителя.
Конструкция такого вида позволяет подключить TrueType (ttf) и OpenType (otf) шрифты.
Интересно: OpenType обладает бо́льшими по сравнению с TrueType возможностями предпечатной подготовки и поддерживает бо́льший набор символов при меньшем размере файла.
Казалось бы, на этом тему можно было и закрыть, но есть одно НО… Вспомним о наших «особенных» друзьях, а именно о браузерах семейства IE. Для внедрения нестандартного шрифта в IE шрифт должен быть в Embedded OpenType (eot) формате.
Это мало не единственный случай, когда особенность IE приносит больше пользы, чем вреда. Дело в том, что eot формат подразумевает:
- Шифрование. В файл заносятся данные об адресе проекта, так что украсть шрифт и залить себе на сайт у злоумышленников не получится.
- Компрессию. Файл шрифта сжимается, тем самым уменьшаются временные затраты на загрузку.
Приняв к сведению выше сказанное, модифицируем наш пример:
@ font- face { font- family: AlexBrush- Regular; src: local("AlexBrush-Regular " ) , url(./ AlexBrush- Regular. eot) ; } @ font- face { font- family: AlexBrush- Regular; src: local("AlexBrush-Regular" ) , url("./AlexBrush-Regular. otf " ) ; }
Опыт практического применения показал необходимость усовершенствования данного примера для фикса багов и улучшения распознавания обозревателями.
@ font- face { font- family: " AlexBrush-Regular " ; src: url("AlexBrush-Regular.eot" ) ; src: url("AlexBrush-Regular.eot?#iefix" ) format("embedded-opentype" ) , url("AlexBrush-Regular.svg#JournalRegular" ) format("svg" ) ; url("AlexBrush-Regular.woff" ) format("woff" ) , url("AlexBrush-Regular.otf " ) format("truetype" ) , }
Важно!!!
- Гибкость . Настройка и изменение параметров текста не составляет труда.
- Скорость . Минимальное число дополнительных файлов для загрузки, не тормозит страницу как такое же количество элементов на js и Flash.
- SEO . Текст остался текстом – плюсы очевидны.
- Пример работоспособен в браузерах начиная с: IE4, Op, Fx3.5, Cr2, Sa1.
- Перед применением шрифта нужно провести его оптимизацию (читайте послесловие).
- При использовании покупных шрифтов нужно побеспокоится об их безопасности.
- Если пропускная способность канала связи маленькая, то пока не подгрузится файл шрифта, пользователь либо увидит простой шрифт на месте нестандартного, либо не увидит ничего в принципе.
Послесловие.
Оптимизация шрифта
При создании набора символов, разработчики стараются зарядить в него максимум функционала, для того чтобы как можно шире охватить целевую аудиторию. Исходя из этого, они вводят буквы, числа, знаки пунктуации, дополнительные значки, разные виды начертания, целый ряд значений font-weight и т. д.
В результате таких стараний файлы шрифтов могут перевалить за отметку десятков мб. А нужно ли нам такое разнообразие? Ведь для придания пикантного стилевого оттенка, нам (в зависимости от ситуации) не обязательно нужны знаки препинания, разнообразные символы. По правде говоря, и разные начертания не всегда нужны. Или допустим, вы оптимизируете свой сайт строго под рунет, без латыни можно обойтись…
Ну, суть Вы уже уловили. Шрифт нужно оптимизировать:
- Убираем все содержимое, которое не пригодится в решении практической задачи.
- Конвертируем файлы в необходимые форматы.
Как это сделать? На просторах интернета существует целый ряд сервисов, позволяющих выполнить необходимые операции, например: font-face Generator, Online Font Converter, Web Font Optimizer и др.
Защита
На разработку качественного функционального шрифта уходит немало времени, и поэтому такой шрифт стоит неплохой суммы денег. Все покупные (легально) шрифты являются зарегистрированными и представляют собой интеллектуально-промышленную собственность.
При приобретении шрифта Вы получаете право применять его в вэб, но если шрифт с Вашего ресурса выкачает злоумышленник, то ответственность за причинённый разработчику вред понесёт хозяин сайта. Как защитить свой font?
В IE все продумано до нас – защита в формате eot уже встроена. Для всех остальных обозревателей однозначного решения пока нет.
Существуют, конечно, новые разработки – например, формат WOFT, в котором вопрос защиты снимается аналогично eot, но к сожалению, он пока не может похвастаться полной поддержкой в браузерах.
Также вы можете просто применить бесплатные шрифты.
Чтобы создать неповторимый и красочный дизайн, приходится подключать свои шрифты. В этом уроке научимся подключать любой шрифт. Подключение нового шрифта осуществляется при помощи правила @font-face . В этом правиле, как вы наверно догадались, обязательно должны быть два свойства: имя шрифта и путь к файлу (к шрифту). Следующие примеры будут относительно шрифта Open Sans. Рассмотрим первый пример.
@font-face {
font-family: "Open Sans";
src: local("Open Sans"),
url("/font/open_sans.ttf") format("truetype");
}
Свойство font-family мы применяем, чтобы указать имя шрифта (далее будем использовать его так: p {font-family: "Open Sans" sans-serif}). Часть кода local("Open Sans") означает проверку на наличие у пользователя этого шрифта. Если вы не хотите проверять наличие шрифта у пользователя, то можно писать как во втором примере.
@font-face {
font-family: "Open Sans";
src: url("/font/open_sans.ttf") format("truetype");
}
Третий пример более полный и более кроссбраузерный.
@font-face {
font-family: "Open Sans";
src: url("open_sans.eot");
src: url("open_sans.ttf") format("truetype"),
url("open_sans.woff") format("woff");
font-weight: normal;
font-style: normal;
}
Другие способы подключения шрифтов
Способ первый (например, берем шрифт с сайта Google), код вставляется в
.Подключение нового шрифта на сайт не самая простая задача. Где выбрать, скачать и как подключить шрифт на сайт в CSS ? В этой статье мы покажем один из самых удобных способов установки и подключения шрифта на сайт.
Как подключить шрифт на сайт в CSS
Например, у нас есть шрифт Raleway.ttf и мы хотим использовать его во всех заголовках(h1 ) нашего сайта. Для этого выполняем следующие действия:
h1 { font-family : "RalewayRegular" ; }
Теперь все заголовки 1-го уровня на сайте отображаются с нужным нам шрифтом.
Если вы хотите подключить несколько шрифтов(или их начертаний), то просто добавьте их под предыдущим:
@font-face { font-family : "RalewayRegular" ; src :url("../fonts/RalewayRegular.ttf" ) format("truetype" ) ; font-style : normal ; font-weight : normal ; } @font-face { font-family : "RalewayBold" ; src :url("../fonts/RalewayBold.ttf" ) format("truetype" ) ; font-style : normal ; font-weight : normal ; }
Вы могли заметить, что есть разные форматы шрифтов - .ttf, .woff, .eot, .svg и др. Еще существует формат для современных браузеров.woff2 , но о нем мы расскажем в одной из следующих статей. Обычно каждый шрифт подключается сразу в 3х форматах. Это сделано, чтобы шрифт правильно отображался во всех браузерах в т.ч. и старых. Выглядит это так:
@font-face { font-family : "RalewayRegular" ; src :url("../fonts/RalewayRegular/RalewayRegular.eot" ) ; src :url("../fonts/RalewayRegular/RalewayRegular.eot?#iefix" ) format("embedded-opentype" ) , url("../fonts/RalewayRegular/RalewayRegular.woff" ) format("woff" ) , url("../fonts/RalewayRegular/RalewayRegular.ttf" ) format("truetype" ) ; font-style : normal ; font-weight : normal ; }
Здесь следует обратить внимание на порядок подключения - это важно!
Не будем вдаваться в подробности, просто запомните вид этой конструкции.
Если у вас есть шрифт только в одном формате, то воспользуйтесь различными конверторами шрифтов. Вот один из них .
Как подключить шрифт с помощью различных сервисов
Также можно воспользоваться сервисом fonts4web для подключения шрифтов:
Самый простой способ подключения шрифтов
Как подключить шрифт к шаблону Moguta CMS
Как добавить ссылку с Google fonts в шаблон Moguta CMS
Теперь вы знаете как подключить шрифт на сайт в CSS и не только. Мы с радостью ответим на все ваши вопросы
На днях, в очередной раз, решил начать отжиматься. Один уважаемый мною поуч утверждает, что это упражнение обладает чуть-ли не волшебным эффектом, если всё сделать правильно.
Ну и поставил я над собой эксперимент, а чтобы было труднее соскочить, решил «лабораторную тетрадь» сделать публичной и разместил ее на одном заброшенном блоге.
Старый дизайн не соответствовал новой задумке , и я, не долго думая, взял более-менее понравившийся из общего репозитория WordPress’а.
Знаете в чем проблема некоторых готовых шаблонов, взятых оттуда? Проблема в корявой совместимости с кириллическими шрифтами. В моем случае, пострадали заголовки. Поскольку шрифт, на который ссылался CSS не содержал русских символов, оные брались из шрифта по умолчанию (то ли Sans, то ли Arial). В итоге, заголовки были ОГРОМНЫ и портили весь вид. Пришлось думать, чем заменить шрифт.
Способов это сделать — несколько.
Способ 1: Тупой
Сводится к тому, что вы находите в сети подходящий шрифт, устанавливаете к себе на комп, прописываете в CSS и видите свой сайт так, как было задумано.
Остальные продолжают видеть его в лучшем случае с дефолтными шрифтами, а в худшем еще и разъехавшимся.
Не делайте так!
Способ 2: Преобразуем дизайн под стандартный шрифт
Это самый идеальный вариант , но, к сожалению, он не всегда годится, поскольку иногда из за него теряется «изюминка» дизайна. Тем не менее, ВСЕГДА рассматривайте такой подход, поскольку, как бы вы не старались, может получиться, что клиентский компьютер все-равно задействует шрифт из тех, которые имеются в наличии.
Безопасные шрифты, которые есть почти во всех операционных системах, это: Verdana (идеален для текстов) , Impact (иногда очень хорош в заголовках) , Arial, Arial Black, Comic Sans MS (кака, которую очень любят новички) , Courier New (подходит для примеров кода и форм) , Georgia, Times New Roman, Trebuchet MS.
Способ 3: Картинка вместо текста
Вариант очень кроссбраузерный и подходит для оформления статичных элементов. Например — шапки сайта. Делаете прозрачную PNG с текстом с нужным шрифтом, обрабатываете как вам надо и вставляете на сайт, не забыв заполнить ALT. Или то же самое, но текст прилепляем на какой-нибудь фон и сохраняем в JPG.
Мне же, кроме шапки, нужно было изменить внешний вид заголовков постов и виджетов. Ну не делать же под каждую запись отдельную картинку с заголовком?
Хотя есть умельцы, которые герерируют картинки с текстом заголовков при помощи серверных скриптов, но это уже извращение.
Способ 4: Cufon
Эти аплеты можно создать из файла шрифта с помощью онлайн-генератора http://cufon.shoqolate.com/generate/
Самый простой способ, воспользоваться http://www.google.com/fonts Выбираете нужный шрифт из представленных и получаете готовый код, который нужно вставить на сайт (в head, и в файл стилей), после чего всё работает.
Но мне не захотелось использовать лишний javascript, заморачиваться с генерацией аплетов и т.д. Хотелось все сделать быстро и просто. Тем более, что файл с нужным шрифтом уже давно был в наличии.
Способ 4: Подключить шрифт к сайту с помощью CSS
В интернете полно руководств на эту тему. Однако, перепробовав пятОк из них я пришел к плачевному результату. Мой TTF-шрифт нормально отображался только в IE. В остальных браузерах его беспощадно заменил Arial.
Признаюсь, я не фанат IE и считаю его браузером для скачивания браузеров. Не более! Так что, пришлось сделать небольшое усовершенствование.
Чтобы подключить к сайту шрифт с помощью CSS нам понадобится сам шрифт (файл) и онлайн конвертер http://onlinefontconverter.com/
Онлайн-конвертеров шрифтов может быть великое множество. Одни закрываются, вместо них появляются новые, так что, если этого конкретного уже нет, поищите в поисковиках по запросу типа «online font converter» и попробуйте скорнвертировать шрифты там. В данном-же посте приведенные конвертеры используется в качестве примера.
1. Заходите на сайт конвертера , хватаете имеющийся у вас шрифт и тащите вот в такое окошко (оно обычно в правой колонке).
2. Скачиваете шрифт в 4-х вариантах: EOT, OTF, TTF и WOFF. Этого должно хватить. Браузер, в процессе рендеринга страницы, сам выберет и скачает тот, который ему удобнее.
3. Заливаете шрифты на сайт. Я создал для этого в корне сайта папку «f» и разместил их туда.
Update 16.02.2015: На данный момент onlinefontconverter.com переделали и ни один из предложенных шрифтов он не сконвертировал((
Пришлось воспользоваться сайтом font2web.com . Этот отдает все необходимые шрифты сразу пачкой в одном архиве. Удобно!
4. Подключаете подгрузку шрифта к сайту. Для этого в css-файл, или в соответствующие тэги стилей, вписываем вот этот код.
@font-face{ font-family: EtoMoiFont; src: url(/f/myFont1.eot), url(/f/myFont1.otf), url(/f/myFont1.ttf), url(/f/myFont1.woff); }
font-family: EtoMoiFont; — говорит браузеру о том, как будет называться подгруженный шрифт. Название придумайте сами.
src: url(/f/myFont1.eot), url(/f/myFont1.otf), url(/f/myFont1.ttf), url(/f/myFont1.woff); — указывает путь и имена файлов шрифтов.
Почему шрифты идут именно в этом порядке?
Первым, я поставил EOT . Этот формат используют старые версии IE.
Вторым — OTF . Это сжатый формат шрифтов, который, по идее, весит меньше.
Третьим — TTF . Его понимают практически все браузеры. Хотя, бывает по разному. Например в iOS он может не открыться.
Последним
— WOFF
. Это должно хорошо читаться на маках, но проверить еще не было времени.
5. Обозначаете в файле стилей , каким семейством шрифтов выводить заголовки (в нашем случае заголовки h2 ).
h2{font-family: EtoMoiFont;}
Готово!
Если шрифты не применились, убедитесь: во-первых, в том, что css-файл используется сайтом (иногда нужно сбросить кеш, иногда искать другой css-файл), во-вторых, что использование шрифта для указанного вами класса (id или тэга) не блокируются в другом css-файле, который грузится после этого.
Прелесть метода в том, что в будущем я могу задать этот шрифт для любого текстового контейнера.
Вот, что получилось.
Минус метода в том, что настройки браузеров некоторых параноидальных пользователей могут запрещать загружать внешние шрифты, flash, javascript, картинки и пр. пр.
Поэтому не поленитесь, и проверьте, как будет выглядеть ваш сайт, если подгружаемые шрифты отключены. Попробуйте поиграть с безопасными из способа 2 , а после снова подгрузить ваши. Если размеры более-менее совпадают и ничего не разъехалось, значит — порядок.
И еще! Тестируйте методы только на компьютерах, где шрифт, с которым собираетесь работать, не установлен. Иначе получится способ номер 1 .
На этом всё. С вами был .
До новых встреч.
