Bazaprogram.ru

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

Css font times new roman

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 определяет приоритетный список из одного или нескольких названий семейства шрифтов и/или общее имя шрифта для выбранного элемента.

The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

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

Часто удобно использовать сокращённое свойство font , чтобы задать font-size и другие свойства, которые относятся к шрифту.

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

Свойство font-family определяет список шрифтов в приоритете от высшего к низшему. Процесс выбора шрифта не останавливается после первого шрифта, найденного в системе пользователя. Скорее, выбор шрифта выполняется по одному символу за раз, поэтому если в доступном шрифте нет глифы для нужного символа, пробуются следующие по списку шрифты. (Однако, это не работает в Internet Explorer 6 и ранее.) Когда шрифт доступен только в некоторых стилях , видах или размерах , эти свойства могут так же влиять на выбор шрифта.

Синтаксис

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

В приведенном ниже примере перечислены два семейства шрифтов, первое «> , а второе как :

Значения

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

Читать еще:  Это приложение заблокировано в целях защиты

serif Глифы имеют завершающие штрихи, расширяющиеся или сужающиеся концы, или имеют фактически зазубренные окончания.
Например, » Lucida Bright» , » Lucida Fax» , Palatino , «Palatino Linotype» , Palladio , «URW Palladio» , serif . sans-serif Глифы имеют гладкие окончания.
Например, «Open Sans» , «Fira Sans» , «Lucida Sans» , «Lucida Sans Unicode» , «Trebuchet MS» , «Liberation Sans» , «Nimbus Sans L» , sans-serif . monospace Все глифы имеют одинаковую фиксированную ширину.
Например, «Fira Mono» , «DejaVu Sans Mono» , Menlo , Consolas , «Liberation Mono» , Monaco , «Lucida Console» , monospace. cursive Глифы в курсивных шрифтах обычно имеют либо соединительные штрихи, либо другие рукописные характеристики, отличные от наклонных (italic) шрифтов. Глифы частично или полностью связаны, и результат больше напоминает рукописное перо или кисть, чем печатные буквы. Например, «Brush Script MT «, «Brush Script Std «, «Lucida Calligraphy» , «Lucida Handwriting» , «Apple Chancery» , cursive . fantasy Фэнтезийные шрифты — это прежде всего декоративные шрифты, которые содержат игривое представление персонажей. Например, Papyrus , Herculanum , Party LET , Curlz MT , Harrington , fantasy . system-ui Глифы, взятые из дефолтного шрифта пользовательского интерфейса на данной платформе. Поскольку типографские традиции широко варьируются по всему миру, это общее семейство предназначено для гарнитур, которые не отображаются точно в других общих семействах. math Это семейство предназначено для особых стилистических задач представления математики: верхний индекс и нижний индекс, скобки, которые пересекают несколько строк, вложенные выражения и двойные глифы с различными значениями. emoji Шрифты, специально предназначенные для отображения эмодзи. fangsong Особый стиль китайских иероглифов, который является чем-то средним между стилем с засечками Song и курсивным стилем Кай. Этот стиль часто используется для правительственных документов.

Валидные имена семейства шрифтов

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

Например, следующие объявления являются валидными:

Следующие объявления являются не валидными:

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
Поддержка:ДаДаДаДа

Браузеры

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

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

Шрифты для сайта в CSS

Вас интересуют web шрифты? Вы в нужном месте! Вы узнаете, какие шрифты применяются в интернете, и как они оформляются свойствами CSS, а так же, что такое кроссбраузерность и сервисы шрифтов.

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

Наверное поэтому, обычно мы видим на веб страницах лишь несколько образцов шрифта и вот почему.

Дело в том, что есть такое явление, как кроссбраузерность, то есть возможность какого либо элемента, одинаково отображаться во всех имеющихся в интернете браузерах.

Читать еще:  Arial narrow css

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

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

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

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

Ими был создан сервис, или библиотека, «Google Fonts», который изменил ситуацию в лучшую сторону, но о нём в конце статьи.

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

А пока я представлю список тех шрифтов, которые входят в наиболее распространённые ОС, а значит в большинстве случаев отобразятся так как положено.

1. Семейство sans-serif — шрифты без засечек, с прямыми чётко прописанными контурами.

а) ArialШрифты для сайта
б) Arial BlackШрифты для сайта
в) TahomaШрифты для сайта
г) VerdanaШрифты для сайта
д) Lucida Sans UnicodeШрифты для сайта
е) Trebuchet MSШрифты для сайта
ж) MS Sans SerifШрифты для сайта
з) ImpactШрифты для сайта
е) Century GothicШрифты для сайта

2. Семейство serif — шрифты с засечками.

а) Times New RomanШрифты для сайта
б) GeorgiaШрифты для сайта
в) Palatino LinotypeШрифты для сайта
г) MS SerifШрифты для сайта
д) SylfaenШрифты для сайта
е) GaramondШрифты для сайта
ж) CenturyШрифты для сайта

3. Семейство monospace — моноширинные шрифты.

а) Courier NewШрифты для сайта
б) Lucida ConsoleШрифты для сайта
в) ConsolasШрифты для сайта
г) Courier NewШрифты для сайта

4. Семейство cursive .

а) Сomic Sans MSШрифты для сайта
б) Monotype CorsivaШрифты для сайта
в) MistralШрифты для сайта

CSS для шрифтов

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

Сначала посмотрим, как задаются шрифты в таблицах стилей.

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

, если шрифты будут задаваться для заголовков или абзацев.

Задаются шрифты при помощи свойства CSS font-family , а в значении указывается название шрифта.

Задать шрифт и его оформление можно как в файле style.css, так и непосредственно в теге элемента.

В файле style.css задаётся общий шрифт для всех страниц сайта, а в теге, для выделения небольших участков контента.

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

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

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

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

Размер и цвет шрифта

Рассмотрим, как в CSS задаётся размер и цвет шрифта. Размер шрифта задаётся в пикселях (px), реже в процентах (%), и совсем редко в единицах(em) и пунктах (pt).

Базовый размер шрифта составляет: 16px, 100%, 1em, 12pt. Значит, если нам потребуется увеличить, или уменьшить шрифт, мы будем двигаться от этих данных в сторону увеличения, или уменьшения.

Свойство для задания размера шрифта называется font-size , и давайте установим его для всех абзацев, допустим, в 18px.

Так же можно задать это свойство заголовку h1 , в том случае, если размер заголовка нужно ещё увеличить

Цвет шрифта задаётся свойством color

Можно так же задать размер и цвет какому либо слову или предложению расположенному внутри абзаца, используя тег и атрибут style

Тег вводит в html код встроенные стили. Чуть ниже рассмотрим, как то же самое делается при помощи классов.

Теперь посмотрим, как отобразит этот код браузер.

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

Главное их знать, чтоб в дальнейшем, если придётся работать с каким либо кодом, иметь представление, что за значение указано в свойстве font-size .

Читать еще:  Отступ текста сверху css

Жирный и курсивный шрифт

Толщина шрифта задаётся свойством font-wieght , которое принимает следующие значения:

1. normal — нормальный;
2. bold — полужирный;
3. bolder — жирнее родителя;
4. lighter — тоньше родителя;
5. от 100 до 900 — цифровое значение, не обладает кроссбраузерностью;

Курсив задаётся свойством font-style , принимающим значение – italic .

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

Растянутый и сжатый шрифт

У шрифта можно изменить расстояние между символами и словами.

Для изменения расстояния между символами применяется свойство css letter-spacing

Для изменения расстояния между словами применяется свойство word-spacing

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

Дополнительные шрифты

А теперь, как и было обещано, познакомимся, и научимся пользоваться сервисом Google Fonts

Представляю скриншот Главной страницы сервиса.

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

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

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

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

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

Внизу появится чёрная полоса Family Selected. Щёлкаем по ней — открывается окно с кодом.

По умолчанию открывается вкладка STANDART в которой дан код для внедрения через файл head вашего сайта. Например:

Копируете его и вставляете в файл head, туда, где у вас прописаны все теги

Если с этой вкладки перейти на вкладку @IMPORT, то вы получите код для файла style.css вашего сайта. Например:

Этот код вставляется в самое начало файла style.css, перед самым первым селектором.

Только @import работает дольше чем link, что увеличивает время загрузки страницы.

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

Теперь вам остаётся только оформить нужный элемент указанием шрифта так, как я уже показывал выше. Но, на всякий случай, ещё раз

Всё, шрифт,как говориться, внедрён.

Можно посмотреть, как он отображается, хотя особо переживать по этому поводу не стоит.

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

А теперь посмотрим, как внедряется шрифт из библиотеки Google Fonts, на сайт управляющийся CMS WordPress.

Сделать это можно прямо из панели управления (одно из неоспоримых достоинств этой CMS).

Заходим в Панель управления > Внешний вид > Редактор, и находим в php-файлах темы, файл с тегом head .

В теме TwentyTen — это файл header.php . В коде этого файла, после тега обычно расположен блок с подключающими тегами

Вот в этом блоке и нужно вставить код, из вкладки STANDART.

Если же внедрять через файл стилей, то берём код из вкладки @IMPORT и вставляем в самое начало файла style.css

Обновляем файл — шрифт внедрён, и в дальнейшем на Ваше усмотрение.

Если Вы хотите, чтобы все определённые заголовки Вашего сайта, отображались данным шрифтом, то нужно в файле style.css , в том же редакторе, найти селектор заголовков, допустим h1<> , и вставить в него название и семейство шрифта.

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

Если же Вам захочется целую отдельную статью отобразить таким шрифтом, то нет проблем — заключайте всю статью в этот span или лучше div, и вся статья будет отображена этим шрифтом.

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

fontstorage.com — Большая библиотека шрифтов на многих языках.

www.xfont.ru — Самая большая библиотека русскоязычных шрифтов.

Подробнее, как поменять шрифты в шаблоне WordPress TwentyTen, можно посмотреть в статье Редактируем тему оформления

Желаю творческих успехов.

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


Перемена

Петя всего-навсего сказал «Привет!», а Люся мысленно сыграла свадьбу и родила троих детей.

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