Атрибут face в HTML

Содержание

Задаем шрифт текста. Атрибут face тега font

Все мы пользовались известным редактором текста Word. И мы знаем, что в нем очень легко изменить шрифт, размер и цвет текста. Так вот, в html тоже без особого труда можно задать эти параметры. Для этого существует тег . Он парный и потому имеет закрывающий тег , ведь браузеру нужно понимать, где начало и конец текста, которому мы изменяем параметры. Тег имеет три атрибута: face, size и color, задающие тексту шрифт, размер и цвет соответственно. В этом уроке мы подробно рассмотрим шрифты.

Чтобы изменить шрифт текста в html – файле, мы должны заключить текст в теги и и обязательно применить атрибут face. Выглядит это так:

Названия шрифтов можно посмотреть в редакторе Word. Там довольно длинный список. Давайте на примере рассмотрим, как изменить шрифт текста в html и напишем следующий код:

Сохраним файл под любым именем и посмотрим, что получилось:

Как мы видим, все сработало: первый абзац имеет шрифт по умолчанию, во втором абзаце мы задали шрифт Batang, а в третьем – текст отобразился шрифтом Comic Sans MS. В принципе все легко и понятно, но есть одно замечание. Так как заданный шрифт не сохраняется в HTML – файле, то нет никакой гарантии, что в браузере он отобразиться как нужно. Мы не можем быть уверены на 100%, что на компьютере посетителя имеется шрифт, который мы задали, тем более, если этот шрифт не стандартный. Поэтому в атрибуте face лучше указывать около трех названий шрифтов, которые перечисляются через запятую, чтоб хоть один из них отобразился наверняка. Давайте рассмотрим пример:

Илон Маск рекомендует:  Выбираем онлайн-курсы английского языка

Посмотрим на результат:

Текст отобразился шрифтом Batang, который мы указали в атрибуте face первым. Если не сработает этот шрифт в браузере посетителя, то сработает второй шрифт — Comic Sans MS и если не сработает этот шрифт, то уж наверняка текст отобразиться шрифтом Arial.

Другие параметры шрифта

И на закуску давайте рассмотрим другие параметры шрифта. В первом уроке мы уже рассмотрели теги, которые задают полужирный шрифт и курсив, это теги и соответственно. Давайте рассмотрим еще несколько тегов, которые задают стиль шрифту:

— текст будет подчеркнутый
— текст, заключенный в этот тег будет перечеркнутым
— аналогичен предыдущему и также перечеркивает текст
— шрифт станет моноширинным
— маленький текст
— большой текст
— задает верхний индекс
— задает нижний индекс

Всему тексту мы задали шрифт Comic Sans MS, первую строку подчеркнули, используя тег , помним из первого урока, что тег
делает перенос на новую строку, вторая строка у нас перечеркнута благодаря тегу и в последней строке мы задали в верхнем индексе слово «верх». Все ничего сложного! С остальными тегами можете поэкспериментировать самостоятельно. Если вам все понятно, можете переходить на следующий урок, в котором мы рассмотрим, как задать тексту размер, если же остались вопросы, посмотрите подробное видео этого урока.

Блог Vaden Pro

  • 40 просмотров

Характеристики атрибута

В каких браузерах работает?

3.0+ 1.0+ 2.0+ 1.0+ 1.0+ 1.0+ 1.0+

В каких спецификациях используется?

HTML 3.2 4.01 5.0
XHTML 1.0 1.1

Для чего используется?

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

В атрибуте допускается прописывание нескольких семейств шрифтов. Каждый из них разделяются между собой запятыми. Причина этого кроется в том, что браузер ищет первый записанный шрифт на компьютере посетителя веб-ресурса, а в случае отсутствия такого — переходит к следующему и так далее. Поэтому указывают несколько шрифтов. В первую очередь должен быть записан самый экзотический шрифт, потом более распространенный и в конце один из общих — serif, sans-serif, cursive, fantasy или monospace.

Как правильно задавать?

Какие значения могут быть записаны в атрибут?

Названия шрифтов через запятую. Их количество не ограничивается. ниже приводится список универсальных шрифтов

  • serif — такие шрифты имеют специфические засечки, яркий пример является семейство Times.
  • sans-serif — противоположный шрифтам serif, не имеет засечек и гротесков. Пример — Arial.
  • cursive — все семейства, которые прописываются с помощью курсива.
  • fantasy — любые экзотические шрифты.
  • monospace — шрифты, у которых одинаково фиксированные отступы между символами.

Теги Font (Face, Size и Color), Blockquote и Pre — устаревшее форматирование текста в чистом HTML (без использования CSS)

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня продолжим добавление новых материалов по тематике чистого Html. Чуть позже мы перейдем к изучению CSS, но сначала следует разобрать все нюансы, связанные с языком ХТМЛ. До этого уже успели рассмотреть директивы комментариев и doctype, а также теги H1-H6 (заголовки), Hr (линия), P (абзац), Br (перенос строки) и атрибуты Html тэгов (align, width).

Мы узнали как добавить средствами таблицу, а также как вставить картинку в Html код через тег Img, создать веб форму или список через теги UL, OL, LI, DL, ну и еще, в свое время, мы успели затронуть основы популярной верстки сайтов. Сегодня продолжим рассмотрение различных тэгов, а именно Font, Blockquote, Pre, Strong, Em, B, I и других, позволяющих осуществлять форматирование текста.

Blockquote и Pre — форматирование в HTML

Раньше(еще до появления CSS) тег цитаты Blockquote в Html коде использовался довольно часто, потому что фрагмент текста, заключенный в него, получал горизонтальный отступ, что было не так-то просто сделать в то время в силу невозможности использования CSS свойств. Элемент Blockquote является парным и внутри него могут находиться как строчные теги, так и блочные (например, абзацы P).

Сейчас тег Blockquote по-прежнему используется при оформлении текста, но внешний вид цитат в наше время уже обычно задается с помощью CSS свойств, прописанных именно для него в файле с таблицами стилей вашего шаблона оформления. Например, в случае моего блога, в style.css можно найти следующие строки:

Ну, а то, как будут при этом выглядеть цитататы, заключенные в Blockquote, вы можете увидеть в тексте статьи с интервью с руководителем биржи ГоГетЛинкс.

Кроме цитаты в Html раньше (до появления CSS) довольно широко использовался еще один тег форматирования — Center. Он является парным (своеобразный контейнер) и блочным. В нем можно заключать любые элементы текста (как строчные, так и блочные), которые в результате сего действа будут выровнены по центру.

Сейчас этот тег Center не рекомендован валидатором WC3 для применения, но вполне может использоваться при форматирования, например, в почтовой рассылке на subscribe, когда стилевое оформление применять будет сложновато.

Так, теперь давайте рассмотрим тэг Pre, который позволяет передать форматирование текста заданное непосредственно в исходном коде. Помните я говорил, что все идущие подряд в Html коде пробельные символы (пробел, табуляция и перенос строки) будут при разборе кода в браузере заменены одним единственным пробелом.

Так вот, элемент Pre запрещает сокращение пробельных символов в участке текста, который будет в него заключен. Что примечательно, для фрагмента, заключенного в Pre, браузер не будет осуществлять автоматический перенос строк по пробельным символам.

Т.е. все строки внутри элемента Pre будут считаться браузером неразрывными — как вы написали в коде, так и будет отображаться в браузере. Причем, в обозревателе для отображения участка текста, отформатированного с помощью тега Pre, будет использоваться моноширинный шрифт, типа Courier New или подобные ему.

Сам тэг Pre является блочным, а внутри него (этот тег парный) может быть заключен только строчный контент (т.е. внутри него не следует размещать абзацы P, заголовков H1 — H6 и т.п.).

В Html есть еще один блочный тэг, который предназначен для форматирования текста — Address. Внутри этого тега может располагаться по стандартам валидатора только строчный контент, который будет отображен в браузере курсивом.

Font — работа с цветом и шрифтом текста в чистом Html

Помните, мы говорили про цвета в Html коде? Так вот, раньше в языке гипертекстовой разметки, когда еще и речи не шло про CSS, для задания цвета текста в документе использовали специальный атрибут Text, который прописывался в тэге Body (а через атрибут Bgcolor можно было задать цвет фона для документа):

Если нужно было изменить цвет небольшого фрагмента текста, то использовали атрибут Color в теге Font, который на данный момент является устаревшим и не рекомендованным к применению валидатором W3C, но его еще можно встретить в коде некоторых движков сайтов (систем управления контентом или CMS, о которых тут шла речь), да и в той же почтовой рассылке он может использоваться.

Хотя, конечно же, сейчас гораздо правильнее вместо Font использовать CSS свойства. Но не суть важно, мы поговорим об этом устаревшем элементе для общего, так сказать, развития.

Тег Font является строчным и поэтому внутри него можно заключать только строчные элементы (абзацы и заголовки внутрь него попадать не должны, иначе Html код перестанет быть валидным). Естественно, что он является парным, т.е. вы с помощью него заключаете слова в своеобразный контейнер для его последующего форматирования.

Устаревшее форматирование — несколько слов, покрашенных в красный цвет с помощью Font и его атрибута Color. Но этот элемент может не только изменять цвет заключенного внутри него слова, но и изменять его размер (атрибут Size) и начертание шрифта (атрибут Face).

Задавая размер шрифта с помощью атрибута Size тега Font, вы могли использовать только семь значений (от 1 до 7 — это не пиксели, а относительные размеры). Причем, базовый размер шрифта, принятый в браузере по умолчанию, соответствовал значению Size равному трем, а шестерка соответствовала размеру заголовка H1, принятому в данном браузере. Все остальные цифры для Size отдавались на усмотрение данного конкретного обозревателя.

Задаем тип шрифта в чистом Html с помощью Face для элемента Font

Теперь давайте рассмотрим задание начертания шрифта в чистом Html коде (без использования таблиц каскадных стилей) с помощью Face.

Вообще, все шрифты делятся на несколько больших групп:

  1. Серифные (serif) или же, по-другому, с засечками (засечки идут по верхнему и нижнему краю букв этих шрифтов). К этому типу относится Times New Roman.
  2. Рубленные(sans-serif) или, по-другому, без засечек, ярким представителем которых является Arial.
  3. Моноширинные (monospace) — все буквы в таких шрифтах имеют одинаковую ширину. Типичным представителем является все тот же Courier.

В любом браузере есть настройки, где можно задать используемый по умолчанию шрифт и его размер для каждого из приведенных выше семейств. Например, в Firefox добраться до этих настроек можно, выбрав из меню пункты и вкладки «Настройки» — «Настройки» — «Содержимое» — «Дополнительно»:

Т.е. в любом браузере будет задан шрифт и его размер для любого из трех основных семейств (serif, sans-serif и monospace). Если в Html коде начертание и размер будут явно заданы, то они и будут использоваться браузером для отображения.

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

Вопрос довольно интересный, и чтобы ответ на него вас не разочаровал, нужно просто правильно задать начертание шрифта в атрибуте Face тэга Font или же в соответствующем CSS свойстве таблицы каскадных стилей.

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

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

Ну, а если случится страшное и даже Arial на компьютере пользователя найдено не будет, то браузер будет отрисовывать данный кусок текста тем фонтом, который задан в настройках браузера шрифтом по умолчанию для данного семейства (в нашем случае семейства Sans-serif).

А вот если вы не укажете в атрибуте Face тега Font в самом конце название семейства (в нашем примере это sans-serif), то будет взят тот шрифт, который в браузере принят по умолчанию для всех случаев жизни, и он уже может быть не из того семейства, которое вы хотели бы.

Илон Маск рекомендует:  Что такое код odbc_field_precision

Как вы, наверное, поняли, существует проблема в использовании на сайте абсолютно любых шрифтов, которые бы вам захотелось. Почему? Потому что есть вероятность, что у части посетителей вашего сайта их на компьютерах просто-напросто не будет установлено.

Но тем не менее есть набор шрифтов, которые с большой долей вероятности найдутся на компьютерах с ОС Windows, а также и на Линуксе, и Макинтоше, и которые будут входить в базовую поставку всех этих операционных систем.

Т.е. без особых проблем можно использовать на своем сайте Arial, Verdana, Times New Roman, Tahoma, Georgia, Trebuchet MS, Courier New, Comic Sans MS. Одно из возможных решений проблемы скудности шрифтов я подробно описал в статье Красивые шрифты для сайта в онлайн сервисе Google Font.

Strong, Em — тэги логических и визуальных выделений в тексте

Если бы сейчас не существовало CSS, то я должен был бы описать назначение тех или иных тегов логического и физического (визуального) форматирования текста. Но, т.к. CSS сейчас уже используется на подавляющем большинстве сайтов, то роль подобных тэгов в Html коде уже практически сведена к нулю, поэтому я лишь быстро пробегусь по ним и объясню для чего они использовались раньше (а некоторые используются и сейчас).

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

Логические же теги форматирования текста, по идее, ориентированы для указания каких-либо акцентов поисковым машинам. Для пользователя выделение этими элементами тоже будет изменять внешний вид выделенных слов.

Если вы помните, то не так уж давно оптимизаторам советовали выделять значимые места с ключевыми словами (как нужно выделять ключевые слова в тексте) тегами логического форматирования Strong и EM, которые для пользователя будут выглядеть как обычное выделение жирным и курсивом.

А вот для выделений без ключевых слов советовали использовать Html элементы «B» и «I», которые для пользователей опять же выглядели бы тоже как выделение жирным и курсивом, но уже поисковыми машинами не учитывались, т.к. они не являются тэгами логического форматирования.

Сейчас все это уже практически не работает так, как задумывалось, и выделение ключевых слов с помощью Strong и EM мы делаем скорее по привычке, нежели действительно надеясь на определенные дивиденды за это со стороны поисковых систем.

Хотя, кто их знает, может быть мало-мальское влияние Strong и EM на оптимизацию текста еще осталось (читайте про продвижение сайтов своими силами).

Итак, кроме уже упомянутых «B» и «I» (выделение жирным и курсивом) к разряду визуального форматирования можно отнести уже рассмотренные в начале статьи Font, Pre, а также теги:

  1. «U» — выделение подчеркиванием
  2. «Strike» — перечеркивание
  3. «Sup» — верхний индекс
  4. «Sub» — нижний индекс
  5. «Tt» — выделение моноширинным шрифтом
  6. «Big» — увеличить шрифт
  7. «Small» — уменьшить шрифт

Ну, а теперь давайте рассмотрим перечень элементов логического форматирования текста:

  1. «Em» — логическое выделение важных фрагментов курсивом
  2. «Strong» — то же самое, но только выделяться будет жирным
  3. «Cite» — выделение цитат курсивом
  4. «Code» — предназначен для отображения разнообразных кодов моноширинным фонтом
  5. «Samp» — для выделения нескольких символов моноширинным фонтом
  6. «Abbr» — в атрибуте Title этого тэга прописывается расшифровка какой-либо аббревиатуры (типа, CSS или Html, которые читаются по буквам, а не как единое слово). Прописанные в Title слова будут всплывать при подведении к этой аббревиатуре курсора мыши.
  7. «Acronym» — то же самое, но используется для акронимов, т.е. сокращений, которые читаются не по буквам, а как слово (например, МКАД или Гаи)
  8. «Kbd» — используется для отображения моноширинным шрифтом текста, вводимого пользователем сайта с клавиатуры
  9. «Var» — используется для выделения курсивом переменных в каком-либо коде
  10. «Del» — выделение перечеркиванием, когда требуется показать, что какой-то фрагмент был удален после опубликования Html документа
  11. «Ins» — выделение подчеркиванием, когда нужно показать, что какой-то кусок был вставлен после публикации Html документа

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

CSS правило @font-face

Определение и применение

CSS правило @font-face позволяет веб-сайтам скачать и использовать шрифты, отличные от «безопасных веб-шрифтов». При работе с правилом @font-face важным моментом является размещение его в начале вашей таблицы стилей, это позволит вашему браузеру сразу преступить к обработке необходимого шрифта.

Обращаю Ваше внимание, что порядок, в котором вы указываете варианты шрифтов, имеет важное значение, так как Ваш браузер выбирает первый поддерживаемый шрифт. К примеру, если Вы хотите использовать шрифты на сайте WOFF2, которые поддерживаются не всеми браузерами, то необходимо их указать до WOFF.

Поддержка браузерами

Формат шрифта Chrome Firefox Opera Safari IExplorer Edge
TTF/OTF (True Type и Open Type Fonts) 4.0 3.5 10.0 3.1 9.0* 12.0
WOFF (Web Open Font Format) 5.0 3.6 11.1 5.1 9.0 12.0
WOFF2 (Web Open Font Format 2) 36.0 39.0* 26.0 Нет Нет Нет
SVG (Scalable Vector Graphic) 4.0 Нет 9.0 3.2 Нет Нет
EOT (Embedded Open Type) Нет Нет Нет Нет 6.0 12.0
Дескриптор Chrome Firefox Opera Safari IExplorer Edge
unicode-range (определяет диапазон символов Unicode) 36.0 36.0 23.0 Да 9.0 12.0

Значения правила

Значение Описание
font-family Определяет имя шрифта. Шрифты, которые содержат в названии более одного слова, либо цифры, необходимо обязательно помещать в кавычки. Обязательное значение.
src Определяет URL-адрес(ы), откуда шрифт должен быть загружен. Обязательное значение.
Допускается указывать шрифт на локальном компьютере пользователя по имени, используя следующий синтаксис:
@font-face<
font-family : «Font Name» ;
src : local(«Font Name») , url(«/fonts/Font Name.woff2») format(‘woff2’), url(«/fonts/Font Name.woff») format(‘woff’), url(‘/fonts/Font Name.ttf’) format(‘truetype’) ;
>
Если в этом случае шрифт не найден на локальном компьютере пользователя, то будет осуществлен поиск в других указанных источниках.
font-stretch Определяет как шрифт должен быть растянут. Значение по умолчанию — «normal» . Необязательное значение.
font-style Задает стиль шрифта (обычный | курсивный | наклонный). Значение по умолчанию — «normal» . Необязательное значение.
font-weight Устанавливает насколько жирным будет выглядеть текст. Значение по умолчанию — «normal» . Необязательное значение.
unicode-range Определяет диапазон символов Unicode, которые шрифт поддерживает. Значение по умолчанию — «U+0-10FFFF» . Необязательное значение. С помощью данного дескриптора диапазона Unicode мы можем создать разделенный запятыми список значений диапазона. Каждый из них может быть указан в одной из трех форм:
  • Одна кодовая точка (например, U+416 ).
  • Начальную и конечную кодовые точки диапазона (например, U+400-4ff ).
  • Подстановочный диапазон (например, U+4?? ) — символы ‘?’ обозначают любое шестандцатиричное число.

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

Версия CSS

Пример использования

Для добавления шрифта на страницу Вам необходимо:

  1. использовать правило CSS @font-face, которое сообщает браузеру пользователя, откуда необходимо загружать шрифт и какое имя шрифта при этом используется. При работе с правилом @font-face важным моментом является размещение его в начале вашей таблицы стилей, это позволит вашему браузеру сразу преступить к обработке необходимого шрифта.
  2. использовать CSS свойство font-family, чтобы указать имя задействованного шрифта и применить к интересующему Вас фрагменту текста (по аналогии работы с локальными шрифтами).

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

  1. Переходим на сайт службы Google Fonts.
  2. Выбираем понравившийся нам шрифт, я остановился на шрифте без засечек Roboto, Вы можете найти его в поиске, либо выбрать любой другой:
  3. После этого необходимо добавить его в коллекцию (у Вас должен быть создан аккаунт Google):
  4. После добавления шрифта в коллекцию, для Вас будет доступна возможность скачать его:
  5. Распакуйте архив со шрифтами в директорию, из которой они будут подключаться к Вашей веб-странице, либо страницам:

Как Вы можете заметить, в архиве содержится 12 различных шрифтов. Исходя из названий можно установить, что, например, Roboto-Italic предназначен для курсивного стиля шрифта, Roboto-Bold для жирного начертания шрифта, Roboto-BoldItalic для курсивного жирного начертания и так далее.

Еще раз обращаю Ваше внимание, что один файл шрифта содержит:

  • одну плотность шрифта.
  • один стиль для этого шрифта.

Т.е. если Вам необходимо получить полужирные и курсивные шрифты, то необходимо подгружать их отдельно (использовать правило CSS @font-face для данного типа шрифта)! Конечно в том случае, если они существуют для понравившегося Вам варианта шрифта. Обязательно учтите эти моменты при работе с веб-шрифтами!

Приступим к подключению, загруженных нами шрифтов к нашему документу. Для заголовков второго уровня (элемент

) будем использовать шрифт Roboto-Regular, а для курсивного начертания — Roboto-Italic.

Пример использования правила @font-face(позволяет веб-сайтам скачать и использовать шрифты, отличные от «безопасных веб-шрифтов»).

Для полноты картины, давайте рассмотрим, как добавлять несколько вариантов шрифтов (для поддержки современных более сжатых версий шрифтов):

Еще раз обращаю Ваше внимание, что порядок, в котором вы указываете варианты шрифтов, имеет важное значение, так как Ваш браузер выбирает первый поддерживаемый шрифт. К примеру, если Вы хотите использовать шрифты на сайте WOFF2, которые поддерживаются не всеми браузерами, то необходимо их указать до WOFF.

Более подробно использование правила @font-face Вы можете изучить из учебника CSS в статье: «Работа со шрифтами в CSS».

HTML теги: font и basefont. HTML атрибуты: size, color и face.

29.05.2020
И
Комментариев нет

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

HTML выделяет два тега для работы со шрифтами: font и basefont. Тег basefont не поддерживается современными браузерами и раньше использовался для изменения параметров шрифта во всем документе. Тег font используется для изменения параметров шрифта в отдельно взятой строке.

У этих тегов есть три уникальных атрибута: size, color и face. Атрибут size используется для изменения размера шрифта. Атрибут color позволяет менять цвет шрифта в HTML. А атрибут face изменяет гарнитуру шрифта.
Блог: http://zametkinapolyah.ru/
Рубрика HTML: http://zametkinapolyah.ru/verstka-sajtov/html
Текстовая версия: http://zametkinapolyah.ru/verstka-sajtov/html-shrifty-rabotaem-so-shriftami-v-html.html
Паблик блога в ВК: https://vk.com/zametkinapolyah
Тематическая группа в ВК: https://vk.com/zametkipohtml

Помощь проекту:
WMR: R28827266698
WMZ: Z293550531456
Яндекс.Деньги: 410011531129223

Атрибут face в HTML

The element has been deprecated in HTML5. The proper way to select a font is with the CSS font-family property. This property takes a list of one or more font names, and the browser will use the first one that matches an available font. (Available fonts are fonts installed on the users machine or made available with the @font-face declaration.)

  • Adobe Garamond Premier Pro
  • Garamond
  • Linux Libertine
  • Times New Roman
  • Georgia
  • the default serif font defined by your browser

For more information on styling text, see our tutorial on fonts and typography.

Generic Fonts

In addition to listing specific fonts, you can also list generic font-families. The concept of generic font-families requires a bit of explanation. Let me explain with an analogy.

A few days ago I was in a coffee shop. Not understanding the array of lattes and cappuccinos I simply requested “something with lots of caffeine and sugar”. The person at the counter filled the order with a super-caramel-chocolate-coffee-steamer. Generic font families are like my order at the coffee place. You don’t know exactly what fonts are available, so you just give a description of what you want and the web browser displays something that fits the description.

There are five generic font families, but in practice only three of them are well supported: serif, sans-serif, and monospace. Cursive and fantasy are not understood by most web browsers and should not be relied upon.

Serifs are small accentuations added to font characters to make them more readable. Fonts such as Times New Roman and Book Antiqua use serifs. Fonts that don’t have serifs are often called sans-serif (sans is French for without). Arial and Helvetica are popular sans-serif fonts.

Generic font families are all the font control you need in most situations, and many websites stick to generic font families for reasons having to do with both design and performance. However, if you particularly want a specific font, the best technique is to make a font stack or a list of fonts beginning with named fonts and ending with a generic font family.

You can learn more about font stacks in our tutorial on Fonts and Web Typography.

Выбираем шрифт на HTML странице тег FONT FACE

Выбираем шрифт на HTML странице тег FONT FACE:

Следующим параметром мы сможем задать название шрифта, которым будет отображаться текст на странице:

» Название шрифта «>Пример

Вот примеры разных шрифтов:

» Times New Roman «> Пример

» Comic Sans MS «> Пример

» Verdana «> Пример

Можно писать несколько шрифтов через запятую.

@font-face

На этой странице

Синтаксис

Descriptors

font-display Определяет как отображается шрифт, основываясь на том, был ли он загружен и готов ли к использованию. font-family Указывает имя шрифта, которое будет использоваться для задания свойств шрифта. font-stretch Значение font-stretch . font-style Значение font-style . font-weight Значение font-weight . font-variant Значение font-variant . font-feature-settings Позволяет контролировать другие расширенные особенности OpenType-шрифтов. font-variation-settings Позволяет осуществлять низкоуровневый контроль над вариациями OpenType и TrueType шрифтов, указывая четырёхбуквенные названия осей для изменения вместе с их значениями. src Задает ресурс, содержащий данные шрифта. Это может быть URL-адрес расположения удаленного файла шрифта или имя шрифта на компьютере пользователя.

Чтобы дать браузеру возможность выбрать наиболее подходящий формат шрифта, его можно указать при объявлении внутри функции format() :

Список доступных форматов: «woff» , «woff2» , «truetype» , «opentype» , «embedded-opentype» , и «svg» .

unicode-range Диапазон Unicode кодов, который будет использоваться в шрифте.

Formal syntax

Примеры

Этот пример просто указывает загружаемый шрифт для использования и применяет его ко всему телу документа:

HTML учебник. Бесплатные уроки HTML для начинающих разработчиков и веб-мастеров. Пробуем создать простой HTML сайт.

HTML шрифты. Работаем со шрифтами в HTML: гарнитура, размер, цвет

Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой есть раздел HTML. Мы много говорили о том, что информация на сайте должна быть удобной, доступной, читабельной. Мы рассмотрели несколько HTML тэгов, позволяющих изменять структуру отображения текста HTML страницы в браузере. Теперь мы поговорим про работу со шрифтами в HTML. Замечу, что эта информация в большей степени ознакомительная, так как на данный момент для изменения параметров шрифтов в HTML следует использовать CSS.

HTML шрифты: работаем со шрифтами в HTML

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

Что может делать HTML со шрифтами?

Давайте сразу скажем, что не стоит путать понятие шрифта и текста, хотя зачастую мы подменяем один термин другим. Чтобы разбираться с тем, что мы можем делать со шрифтами в HTML, давайте дадим определение термину шрифт. Шрифт — графический рисунок начертаний букв и знаков, составляющих единую стилистическую и композиционную систему, набор символов определенного размера и рисунка. В узком типографском смысле шрифтом называется комплект типографских литер, предназначенных для набора текста. Такое определение термину шрифт нам дает Википедия.

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

В любом HTML документе у шрифта есть три характеристики: гарнитура, цвет и размер. Шрифты в HTML играют очень важную роль. Именно от того, как отображается шрифт в документе зависит его читабельность. На самом деле отображение шрифта на HTML страницах в браузере зависит от операционной системы и, собственно, самого браузера, в котором открыт HTML документ.

Это вызвано тем, что каждая операционная система поддерживает свой собственный набор шрифтов, который любой пользователь может изменять по своему усмотрению. Также любой браузер имеет собственные настройки, в которых указаны шрифты, которые будут использованы по умолчанию. Изменять шрифты в HTML мы можем двумя способами: средствами самого языка HTML и средствами каскадных таблиц стилей.

В данной записи мы поговорим о том, как работать со шрифтами при помощи HTML. На данный момент этот подход считается не совсем правильным из-за того, что есть CSS и именно при помощи CSS консорциум рекомендует оформлять HTML документы. Но знать о том, как можно работать со шрифтами в HTML нужно, поэтому давайте рассмотрим более подробно, что предлагает HTML для изменения: цвета, гарнитуры и размера шрифта

HTML тэги для работы со шрифтами

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

Второй тэг используется для изменения характеристик шрифта на определенном участке HTML документа. Тэг относится к парным HTML тэгам, а элемент FONT относится к строчным HTML элементам.

HTML атрибуты для работы со шрифтами

Оба тэга для работы со шрифтами в HTML имеют одинаковый набор HTML атрибутов: для них доступны все универсальные HTML атрибуты и атрибуты событий. Также у этих тэгов есть три уникальных атрибута:

  1. Атрибут face. Данный атрибут позволяет изменить гарнитуру шрифта.
  2. Атрибут color. Изменяет цвет шрифта в HTML документе.
  3. Атрибут size. Позволяет изменить размер шрифта в документе.

Вот такое вот ограничение в творчестве по работе со шрифтами в HTML. Как мы уже говорили ранее, HTML позволяет изменить три характеристики шрифта: гарнитуру, цвет и размер.

Изменяем размер шрифта в HTML

Давайте попрактикуемся в изменение размеров шрифта в HTML. Отметим, что атрибут size может принимать семь значений в виде целых чисел от ноля до семи. Размер шрифта по умолчанию в HTML для любого браузера равен трем. Шрифт, для которого HTML атрибут size имеет значение равное единицы, является самым маленьким, семерки – самым большим. Давайте посмотрим это всё на примере, откройте любой удобный для вас редактор, например бесплатный редактор с подсветкой синтаксиса Notepad++ и создайте документ с кодом:

Свойство @font-face

Текстовая тень — отличный трюк, который, кстати, было непросто реализовать методами предыдущего поколения. Однако он всего лишь добавляет эффект объема, а не меняет сам текст. Создание тени — как покраска старого автомобиля: в результате у вас остается все та же старая машина. А у нас — все тот же шрифт.

Проблема со шрифтами стара, как сама Сеть. На компьютерах обычных пользователей Сети чаще всего установлен небольшой набор шрифтов. У разных пользователей на компьютерах можно найти разные шрифтовые гарнитуры, а некоторые умудряются установить шрифты, которых нет у большинства других пользователей. Годами на веб-сайтах приходилось ограничиваться минимальным набором надежных шрифтов — базовой группой, которая наверняка встретится на любом компьютере. Вся информация выводилась на экран исключительно с использованием таких шрифтов.

Свойство @font-face позволяет дизайнерам подключать определенный шрифт и применять его для отображения текста на веб-странице. Теперь любой желаемый шрифт можно встроить в веб-сайт, просто добавив файл этого шрифта.

Листинг 3.10. Новый шрифт для заголовка

Display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD;

-webkit-border-radius: 20px; border-radius: 20px;

-moz-box-shadow: rgb(150,150,150) 5px 5px 10px; — webkit-box-shadow: rgb(150,150,150) 5px 5px 10px; box-shadow: rgb(150,150,150) 5px 5px 10px;

Font: bold 36px MyNewFont, verdana, sans-serif;

Text-shadow: rgb(0,0,150) 3px 3px 5px;

Font-family: ‘MyNewFont’; src: url(‘font. ttf’);

Загрузите файл font. ttf с нашего веб-сайта или выберите один из имеющихся на вашем компьютере. Скопируйте его в ту же папку, где находится CSS-файл. (Для загрузки файла перейдите по ссылке http://minkbooks.com/content/ font. ttf.)

Еще больше бесплатных шрифтов можно загрузить со страницы http://www.moorstation.org/typoasis/designers/ steffmann/.

Свойство @font-face требует указания еще по меньшей мере двух свойств для объявления шрифта и загрузки файла. Свойство font-family задает название, с помощью которого мы будем ссылаться на данный шрифт, а свойство src — URL-адрес файла с кодами для визуализации шрифта.

В листинге 3.10 мы присвоили шрифту имя MyNewFont и указали в качестве источника файл font. ttf.

Файл шрифта должен находиться в том же домене, что и вебстраница (или в нашем случае на том же компьютере). Такое ограничение действует в нескольких браузерах, например Firefox.

После того как шрифт загружен, его можно использовать с любыми элементами документа, всего лишь указав имя шрифта (MyNewFont). Мы определили стиль font в правиле из листинга 3.10 так, чтобы заголовок выводился с использованием нового шрифта. Если же загрузка файла этого шрифта завершится ошибкой, то в качестве альтернативы будут применяться шрифты Verdana и Sans-serif.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL