Bazaprogram.ru

Новости из мира ПК
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Css font family verdana

font-family

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

12.0+4.0+1.0+1.0+3.5+1.0+

Описание

CSS свойство font-family позволяет указать шрифт текста, который будет использован внутри элемента. Существует два способа указать шрифт для использования:

  • family-name (имя шрифта) — название определённого шрифта из какого-нибудь семейства шрифтов, например: times , courier , arial , и т.д. Если название шрифта содержит пробелы, оно должно быть заключено в одиночные или двойные кавычки, например: «Times New Roman» .
  • generic-family (семейство шрифтов) — набор шрифтов, обладающих общими характеристиками. Следующие семейства шрифтов по умолчанию доступны в любой операционной системе: serif , sans-serif , cursive , fantasy , monospace .

Описание стандартных семейств шрифтов:

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

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

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

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

Чаще всего при указании свойства font-family , используют «безопасные» (стандартные) Web-шрифты.

Чтобы на сайте отображался выбранный вами нестандартный шрифт для текста, который с высокой вероятностью будет отсутствовать у большинства пользователей, нужно совместно со свойством font-family использовать правило @font-face.

font-family

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

Тип свойства

Применяется: ко всем элементам.

Значения

Значением свойства font-family является ключевое слово inherit или указание одного или нескольких (через запятую) имен шрифтов, тогда, если в операционной системе пользователя нет первого шрифта, браузер использует второй, потом третий и так далее. В конце рекомендуется поставить одно из имен семейства шрифтов, в этом случае, если ни одного шрифта не будет найдено, браузер применит шрифт максимально подходящий данному семейству.

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

Шрифты и их семейства

ШрифтыСемейство
‘Comic Sans MS’cursive (рукописные)
Couriermonospace (моноширинные)
Arial, Helvetica, Verdana, Tahomasans-serif (рубленные, гротески)
Times, ‘Times New Roman’, Garamondserif (с засечками, антиква)

inherit — наследует значение font-family от родительского элемента.

Процентная запись: не существует.

Значение по умолчанию: зависит от типа и настроек браузера, как правило, это Times New Roman.

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

Синтаксис

Пример CSS: использование font-family

Результат. Использование свойства CSS font-family в браузере Chrome.

В браузере Opera.

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:ДаДаДаДа
Читать еще:  Font background css

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и 7.08.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ЧастичноДаДаДаДаДа

Internet Explorer 6.0 и 7.0 не понимают значение inherit .

Урок 4: Шрифты в CSS

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

Так вот за шрифты в CSS отвечают следующие свойства:

Свойство FONT-FAMILY

Данное свойство определяет гарнитуру шрифта. Вообще FONT-FAMILY с англ. означает семейство шрифта. Дело в том, что шрифты по тем или иным признакам, объединяются в семейства. Я рассмотрю три основных семейства:
Serif — шрифты с характерными «засечками», наиболее яркий представитель — «Times New Roman»;
Sans-serif — шрифты рубленые, без засечек, например Arial или Verdana ;
Monospace — моноширинные шрифты (с одинаковым расстоянием между символами, наподобие печатной машинки), такие как «Courier New»;

На рисунке ниже изображены названия основных, используемых на практике, шрифтов, сгруппированные по семействам. Причем отображены они именно так, как выглядят на самом деле, например название «Times New Roman» отображено шрифтом «Times New Roman» , ну вы поняли.

Может Вам интересно, почему некоторые шрифты мы заключаем в кавычки? А дело в том, что есть такое правило: «Если в названии шрифта встречаются пробелы, то его следует заключать в кавычки» .

Т.е. в начале пишется самый приоритетный шрифт, затем менее приоритетный, а затем желательно писать имя семейства. Надпись из примера выше —
h1 < font-family : verdana, arial, sans-serif ;>означает, что все заголовки первого уровня будут отображаться шрифтом verdana . Если по каким либо причинам этот шрифт не установлен на компьютере, то браузер подставит шрифт arial , а если и его нет, то браузер подставит любой доступный шрифт из семейства serif . Вот так.

↑ Наверх ↑

Свойство FONT-STYLE

Данное свойство задает стиль шрифта. Может принимать три значения:

  • normal — обычный;
  • italic — курсивный;
  • oblique — наклонный;

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

h1 <
font-family: verdana, arial, sans-serif;
font-style : normal ;
>
h2 <
font-family: verdana, arial, sans-serif;
font-style : italic ;
>
h3 <
font-family: verdana, arial, sans-serif;
font-style : oblique ;
>

↑ Наверх ↑

Свойство FONT-VARIANT

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

normal — значение по умолчанию, текст отображается обычным образом.
small-caps — буквы нижнего регистра отображаются как уменьшенные заглавные.

Т.е. как видите большие(заглавные буквы) остаются без изменений, а маленькие — представляют собой полную копию заглавных букв, только слегка меньшего размера.

По умолчанию (т.е. если вообще не записывать это свойство) текст будет отображаться обычным начертанием.

Пример записи стиля:

h1 <
font-family: verdana, arial, sans-serif;
font-variant : small-caps ;
>
h2

Думаю тут все понятно, поехали дальше.

↑ Наверх ↑

Свойство FONT-WEIGHT

Это свойство определяет насыщенность шрифта, т.е. с его помощью можно сделать шрифт жирным. Основные значения: normal — обычный и bold — жирный. Некоторые браузеры поддерживают числовые значения: 100, 200,300,400,500,600,700,800,900. Для справки: 400 равносильно normal, а 700 — bold . Но я не советую вам пользоваться числами!

P
DIV <
font-family: arial, verdana, sans-serif;
font-weight : bold ;
>

↑ Наверх ↑

Свойство FONT-SIZE

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

Давайте прикольнемся над заголовками:

h1 <
font-family: arial, verdana, sans-serif;
font-size : 18px ;
>
h2 <
font-family: arial, verdana, sans-serif;
font-size : 36px ;
color: red;
>

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

↑ Наверх ↑

Сокращенная запись. Свойство FONT

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

При этом нужно записывать значения всех свойств через пробел, в такой последовательности:

Читать еще:  Ява скрипт как включить для скайп

font-style _ font-variant _ font-weight _ font-size _ font-family

Ну вот например:

P <
font-style: italic;
font-variant: normal ;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
>

А теперь то же самое в краткой форме:

Еще раз обратите внимание, на то, что все значения указаны в нужной последовательности, и ЧЕРЕЗ ПРОБЕЛ. Если какое-либо свойство не указать, ему присвоится значение по умолчанию.

НУ что, теперь попрактикуйтесь, и можно приступать к следующему уроку.

Подключение шрифтов CSS. Работа с веб-шрифтами. Google Fonts

Первая часть главы посвящена знакомству с CSS шрифтами. На этой странице вы узнаете, как подключать шрифты в CSS, что такое веб-шрифты и как с ними работать, какие форматы шрифтов бывают, как пользоваться Google Fonts. Для начала рассмотрим легкий пример подключения шрифта CSS:

Этот небольшой кусочек кода означает, что ко всем тегам

применен шрифт Verdana. Свойство font-family устанавливает, какой шрифт или семейство шрифтов будет использоваться. Корректное отображение этого стиля в браузере пользователя зависит от того, установлен ли на его компьютере заданный шрифт. В нашем случае, если на компьютере пользователя отсутствует шрифт Verdana, то браузер отобразит шрифт, установленный по умолчанию.

В свое время дизайнерам приходилось дополнительно указывать несколько запасных шрифтов на случай, если на компьютере пользователя будет отсутствовать основной. Допустим, вы желаете оформить текст шрифтом Verdana, а в качестве запасных установить шрифты Trebuchet MS, Geneva и любой шрифт без засечек. Записывается это таким образом:

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

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

Обратите внимание: в коде мы записали название шрифта Trebuchet MS в кавычках. Необходимо брать название шрифта в двойные либо одинарные кавычки тогда, когда в нем содержатся пробелы.

О том, что такое шрифт с засечками (serif) и без (sans-serif), вы можете прочитать на странице Википедии.

Веб-шрифты

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

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

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

Поддержка форматов

Как бороться с проблемой несоответствия формата файла? Давайте взглянем на таблицу, где показаны наиболее популярные форматы шрифтов и узнаем, какие браузеры их поддерживают:

Формат файла шрифтаКакие браузеры поддерживают
TTFПоддерживают все браузеры, кроме: Internet Explorer 8 (и ниже), Opera Mini 5.0-8.0
EOTПоддерживает только Internet Explorer
WOFFПоддерживают все браузеры, кроме: Internet Explorer 8 (и ниже), Opera Mini 5.0-8.0, Android Browser 4.1-4.3
SVGChrome до версии 37 (включительно), Safari, iOS Safari, Android Browser

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

Если вы ориентируетесь на современные браузеры, вам достаточно будет использовать формат шрифта TTF – наиболее распространенный и используемый. В случае, когда вам необходимо иметь несколько форматов одного шрифта, вы можете воспользоваться специальными онлайн-конвертерами из одного формата в другой, а затем подключить все файлы по очереди. Таким образом браузер сможет выбрать тот формат шрифта, с которым он работает.

Подключаем веб-шрифт с помощью @font-face

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

Читать еще:  Css границы текста

Далее нам необходимо дать команду браузеру загрузить шрифт MyUniqueFont . Записывается это с помощью директивы @font-face следующим образом:

Свойство font-family в данном случае играет другую роль: с помощью него мы присваиваем имя шрифту, чтобы потом использовать это имя при написании стиля:

Во второй строке указывается путь к файлу шрифта. В нашем примере файл MyUniqueFont.ttf находится в папке fonts . У вас URL-адрес может отличаться.

Шрифты Google Fonts

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

Скриншот: интерфейс сервиса Google Fonts

Примечание: вся коллекция шрифтов от Google доступна на сайте Google Fonts. На странице можно воспользоваться различными фильтрами для поиска шрифтов по категориям, толщине, алфавиту.

Ниже мы опишем каждый шаг подключения шрифта от Google. Чтобы понимать, о чем идет речь, выберите любой шрифт со страницы Google Fonts и откройте его, нажав на кнопку Quick-use .

Шаг 1: выберите начертание

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

Шаг 2: выберите алфавит

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

Шаг 3: добавьте код на сайт

Далее Google предлагает подключить шрифт одним из нескольких способов: или стандартным, или через директиву @import , или с помощью JavaScript. Мы рассмотрим первые два варианта.

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

Второй способ – подключение шрифта с помощью директивы @import . Готовый код находится во второй вкладке пункта 3 на странице выбранного Google-шрифта. Его нужно добавить в самое начало вашей таблицы стилей (в противном случае файл не импортируется). Выглядит код примерно так:

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

Скриншот: этапы настройки шрифта Google

Шаг 4: создайте стиль

После осуществления предыдущих шагов можно начать применять шрифт. Как записывается такое правило CSS, вы уже видели ранее:

Если на первом шаге вы выбрали несколько вариантов начертания (к примеру, добавили вариант жирного шрифта Bold 700), тогда на третьем шаге код немного видоизменится:

Чтобы затем придать шрифту жирное начертание, запишите CSS-стиль таким образом:

Примечание: в Google Fonts для обозначения насыщенности шрифта используются только условные единицы от 100 до 900. Так, нормальное начертание (по умолчанию) эквивалентно значению 400 (normal), а стандартное полужирное начертание эквивалентно 700 (bold).

Главными преимуществами сервиса Google Fonts является:

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

Среди недостатков сервиса – не очень большое разнообразие шрифтов, особенно кириллических. К слову, в интернете есть и другие похожие сервисы, например, TypeKit (платный).

Итоги

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

Ссылка на основную публикацию
Adblock
detector