Безопасные шрифты
Обратите внимание, что сначала идёт распространённый шрифт (например Arial), если его на компьютере посетителя нет, то идёт более распространённый и похожий на него (например Helvetica), и в конце если оба эти шрифта отсутствуют, подключается serif, sans-serif, monospace или cursive (данные способы начертания шрифта есть всегда).
Arial
Имя шрифта: font-family: Arial, Helvetica, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
Arial Black
Имя шрифта: font-family: ‘Arial Black’, Gadget, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
Bookman Old Style
Имя шрифта: font-family: ‘Bookman Old Style’, serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
Century Gothic*
Имя шрифта: font-family: «Century Gothic», CenturyGothic, AppleGothic, sans-serif;
Comic Sans MS
Имя шрифта: font-family: ‘Comic Sans MS’, cursive;
Цифры: 0 1 2 3 4 5 6 7 8 9
Courier
Имя шрифта: font-family: Courier, monospace;
Цифры: 0 1 2 3 4 5 6 7 8 9
Courier New
Имя шрифта: font-family: ‘Courier New’, Courier, monospace;
Цифры: 0 1 2 3 4 5 6 7 8 9
Garamond
Имя шрифта: font-family: Garamond, serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
Georgia
Имя шрифта: font-family: Georgia, serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
Impact
Имя шрифта: font-family: Impact, Charcoal, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
Lucida Console
Имя шрифта: font-family: ‘Lucida Console’, Monaco, monospace;
MS Sans Serif
Имя шрифта: font-family: ‘MS Sans Serif’, Geneva, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
MS Serif
Имя шрифта: font-family: ‘MS Serif’, ‘New York’, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
Palatino Linotype
Имя шрифта: font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
Tahoma
Имя шрифта: font-family: Tahoma, Geneva, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
Times New Roman
Имя шрифта: font-family: ‘Times New Roman’, Times, serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
Trebuchet MS
Имя шрифта: font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
Verdana
Имя шрифта: font-family: Verdana, Geneva, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
*Шрифт «Century Gothic» содержится на 83% устройств, этот процент растет и в скором будущем он станет безопасным.
Увеличить количество доступных шрифтом можно за счет подключаемых шрифтов от Google Fonts, кириллические шрифты можно скачать тут. Привила сочетания шрифтов и примеры сочетаний можно посмотреть тут: Таблица сочетания шрифтов.
— http://www.xfont.ru/ — Крупнейший сервис по шрифтам.
— http://www.fontov.net/ — бесплатный русскоязычный сервис для поиска и подбора интересующегося Вас шрифта.
— http://ifont.ru/ — Большой русскоязычный сервис шрифтов.
— http://www.dafont.com/ — шрифты с просмотром вашего примера.
— http://www.fonts-online.ru/ — База шрифтов с просмотром Online
— http://fontstruct.com/ — создание собственных шрифтов Online
— http://fontark.net/farkwp/ — Конструктор шрифтов Online
— http://pxtoem.com/ — Переводит одни единицы измерения шрифтов в другие.
— http://csswarp.eleqtriq.com/ — Онлайн сервис для подготовки эффектного текста.
— http://www.bestwebfonts.com/ — Удобный сервис для просмотра веб-шрифтов, в том числе с применением различных эффектов.
«Безопасные» шрифты и их применение в веб-дизайне
При создании сайта очень важно знать какие шрифты можно использовать, а какие нет, это нужно знать как дизайнеру так и верстальщику. Безопасные шрифты это шрифты которые установлены на большинство устройств, а значит достаточно прописать название шрифта чтоб браузер пользователя корректно его отобразил.
Список безопасных шрифтов
Обратите внимание, что сначала идёт распространённый шрифт (например Arial), если его на компьютере посетителя нет, то идёт более распространённый и похожий на него (например Helvetica), и в конце если оба эти шрифта отсутствуют, подключается serif, sans-serif, monospace или cursive (данные способы начертания шрифта есть всегда).
*Шрифт “Century Gothic” содержится на 83% устройств, этот процент растет и в скором будущем он станет безопасным.
Увеличить количество доступных шрифтом можно за счет подключаемых шрифтов от Google Fonts.
Шрифты – иконки
1. http://fontawesome.io – Font Awesome
2. http://zurb.com/playground/foundation-icon-fonts-3 – Foundation icon
3. http://ionicons.com – ionicons
4. http://design.google.com/icons/ – Material Design Icons
5. http://octicons.github.com – Octicons
6. http://www.typicons.com – Typicons
Сервис для выбора иконок: http://glyphsearch.com
Web инструменты для работы со шрифтами
Подбор шрифтов
– http://fontstorage.com/ – База шрифтов с возможностью подбора и вывод в CSS
– http://www.typetester.org/ – Тестирование и подбор шрифтов, вывод в CSS.
– http://csstypeset.com/ – Работа с разными стилями и атрибутами текста и вывод в CSS.
– http://www.designerplaything.co.uk/designer-plaything.html – Подбор шрифта и цвета.
– http://www.texster.ru/ – Помощник в выборе шрифта.
– http://flippingtypical.com/ – Просмотр вашего текста в разном стиле.
– http://www.stcassociates.com/lab/fontbrowser.html – Аналогичен предыдущему (более расширен).
– http://www.blindtextgenerator.com/ru – Русский онлайн Lorem Ipsum генератор.
– http://wordmark.it/ – Просмотр вашего текста в разных стилях.
Распознавание шрифтов
– http://www.myfonts.com/WhatTheFont/ – Определение шрифта по образцу.
– https://www.fontspring.com/matcherator – Определение шрифта по образцу.
– http://www.identifont.com/identify.html – Выявляет шрифт через ряд вопросов о нем.
– http://www.typophile.com/ – Крупнейшее сообщество на тему шрифтов.
– http://www.bowfinprintworks.com/ – поиск шрифтов по образцам.
– http://www.fontshop.com/research/ – выясняет название по форме отдельных символов.
– http://www.flickr.com/groups/typeid/ – определяет названия шрифтов, используемых в различных изображениях.
– http://fount.artequalswork.com/ – бесплатный онлайн сервис для моментальной идентификации шрифта.
Скачать шрифты
– http://www.xfont.ru/ – Крупнейший сервис по шрифтам.
– http://www.fontov.net/ – бесплатный русскоязычный сервис для поиска и подбора интересующегося Вас шрифта.
– http://ifont.ru/ – Большой русскоязычный сервис шрифтов.
– http://www.dafont.com/ – шрифты с просмотром вашего примера.
– http://www.fonts-online.ru/ – База шрифтов с просмотром Online
Прочее
– http://fontstruct.com/ – создание собственных шрифтов Online
– http://fontark.net/farkwp/ – Коструктор шрифтов Online
– http://www.fontsquirrel.com/fontface/generator – загрузка и доработка ваших шрифтов.
– http://pxtoem.com/ – Переводит одни единицы измерения шрифтов в другие.
– http://csswarp.eleqtriq.com/ – Онлайн сервис для подготовки эффектного текста.
– http://www.bestwebfonts.com/ – Удобный сервис для просмотра веб-шрифтов, в том числе с применением различных эффектов.
Источник: pomelnikov.com
Подбор типографики для сайта / Habr
Выбор типографики для сайта почти настолько же важен, как сам дизайн. Он не только помогает посетителю лучше понять содержание вашего сайта, а также создает определенное настроение. Так как в этом плане подбор шрифта — вещь очень субъективная, существует много «правильных вариантов». Но на самом деле выбор типографики не так сложен, как может показаться!
С середины девяностых, когда Netscape представил тег
для изменения шрифта текста (сейчас устарел), веб-мастеры пытались использовать нестандартные шрифты на своих веб-сайтах с определенным успехом.<font size="5" color="black">Black text</font>
На протяжении всей истории интернета и по мере появления новых технологий, можно выделить несколько стадий развития типографики. Сначала использовались обходные пути, например картинки вместо текста, постепенно это сменилось решениями на Flash и CSS, а также Javascript.
В настоящее время доступны разные инструменты и технологии, например шрифты Google (бесплатно) или Adobe Typekit (доступно по подписке), которые намного упрощают внедрение пользовательских шрифтов на сайт. Более того, существуют онлайн-конструкторы и редакторы, такие как Breezi, Squarespace и Moonfruit, которые могут сделать всю работу за вас, сгенерировать код и предоставить вам готовое решение.
Читаемость шрифта превыше всего
Первое, на что стоит обратить внимание — читабельность шрифта, который вы выбираете. Может возникнуть искушение выбрать шрифт по его внешнему виду, и, конечно, внешний вид важен, но вы всегда должны помнить основную причину, зачем вы публикуете материал на сайте — посетители должны быть в состоянии прочитать то, что вы опубликовали.
Поэтому, если шрифт сложно прочитать, нет смысла его использовать. Цель публикации, которая содержит в себе текст — доставить сообщение читателю. Если появятся какие-то трудности, сообщение не будет доставлено. Лучше отказаться от стильного, но нечитаемого шрифта, чем рискнуть, что ваши посетители не смогут понять, что вы хотите сказать.
Начните с типографики основного контента
Вероятно, часть страницы, на которой будет сосредоточено внимание пользователей — это текст основного материала. Там они потратят наибольшее время, читая вашу статью, или что-либо другое, просто потому, что это самый длинный текст на данной странице.
Поэтому, советуется не использовать сложный, нестандартный шрифт. Подойдет любой sans serif, «безопасный для web» (об этом чуть ниже). Основной текст это как раз то место, где предыдущий пункт — читабельность — является наиболее важным.
Также стоит подумать о размере шрифта. Каждый шрифт может иметь разные значения и вариации размеров, поэтому нельзя утверждать, что есть размер, который подходит для каждого шрифта, но примерно 14-16 размер может сработать отлично.
Шрифт для заголовков
Заголовки также важны, потому что они будут начальной точкой для больших объемов текста. Так происходит потому, что люди «сканируют» страницы в интернете, а не читают каждую строчку с начала и до конца.
И заголовки, которые показывают, что будет говориться дальше, и маленькие блоки текста, не предъявляют так много требований к типографике, следовательно у вас есть больше свободы для действий. Для заголовка вы можете позволить себе более искусный и сложный шрифт.
Еще, крупный шрифт проще прочитать, у вас будет больше свободы в выборе шрифта, если вы используете шрифт покрупнее.
Также, если вы используете нестандартный шрифт, вам может понадобиться как-то указать правильный шрифт для ваших заголовков. Например, если вы используете решение на Javascript для отображения шрифта на вашем сайте (например Google Fonts, Adobe Typekit или Cufon), это замедлит скорость загрузки вашего сайта. И чем больше шрифта Javascript должен будет отрисовать, тем медленнее станет ваша страница. Это еще одна причина, почему стоит избегать нестандартных шрифтов в основном тексте.
Как уже упоминалось, для шрифтов не существует стандартных размеров, но если хотите, можете попробовать 32-34 размер для h2, и снижать этот параметр для заголовков следующих уровней, потому что не должно быть текстов больших, чем основной заголовок.
Еще нужно упомянуть, что вы должны подчеркивать иерархию, так что заголовки должны выделяться из обычного текста. Это можно сделать разными способами, но самый простой, используемый наиболее часто, и рекомендуемый — сделать их крупнее обычного текста. Вы также можете выделить их жирным шрифтом, другим цветом, добавить фон или картинку и так далее.
Двух шрифтов хватит!
Если вы используете слишком много разных шрифтов, есть опасность сделать сайт непоследовательным. Такой сайт может больше запутывать, чем разъяснять что-то. Возможно, у такого стиля и есть какая-то цель, но если вы не сможете грамотно реализовать ее, лучше просто избежать такого.
Конечно, «правила придуманы, чтобы их нарушать», и вы можете попробовать воспользоваться тремя или больше шрифтами, и у вас будут хорошие результаты. Но, в общем, всего двух шрифтов может быть достаточно практически для любой цели.
Например, один шрифт может быть использован для стандартного текста, а другой для заголовков или других выделенных элементов.
Категории шрифтов
Гарнитуры можно разделить на две основные категории: с засечками (Serif) и без засечек (Sans serif). Засечки представляют собой небольшие элементы на концах штрихов букв.
Также существуют другие категории, например «Script», «Blackletter» или «Mono», но они не используются так же широко, как предыдущие.
Шрифты, «безопасные для web»
«Безопасный для web» — это термин, используемый для описания доступных элементов, или, другими словами, «безопасный» для использования в интернете. Он применяется не только к шрифтам, но в этом контексте особенно, он относится к шрифтам, которые установлены на большинстве компьютеров (PC и Mac).
Они могут применяться на вашем сайте без каких-либо хаков, методов замены или скриптов и будут правильно отображаться на всех компьютерах (как минимум тех, которые подключены к интернету).
Приведу небольшой список «безопасных» шрифтов:
Без засечек:
- Helvetica
- Arial
- Tahoma
- Impact
- Lucida Sans
- Verdana
- Geneva
С засечками:
- Times New Roman
- Georgia
- Garamond
- Palatino Linotype
- Book Antiqua
- Courier
- Monaco
Другие заметки
Также доступны другие способы форматирования текста, которые вам нужно учитывать, настраивая шрифт. Даже если у вас есть очень хороший шрифт, легко читаемый и отлично подходящий к вашему дизайну,, все впечатление от сайта может быть испорчено, если не настроено расстояние между буквами или высота строки.
Эти две характеристики могут сделать текст более читаемым. Они также могут быть использованы для достижения определенного эффекта, например сделать буквы более сжатыми, что может улучшить ваш дизайн. Пока они остаются читаемыми, это приемлемо.
Примечание относительно длины строк в блоках с текстом: советуется (хотя это и не строгое правило), чтобы на каждой строке было по 45-75 символов. Если строка будет слишком короткая, это замедлит скорость чтения текста. Если строка содержит слишком много знаков, становится очень легко потерять строку, которую читаешь, переходя к следующей.
Выводы
Из всех правил, перечисленных выше, наиболее важное — читаемость текста. Как подчеркивалось на протяжении всей статьи, никакое из остальных привил не должно считаться нерушимым. Вы можете пробовать экспериментировать или спрашивать отзывы у дизайнеров или любого обычного пользователя.
Перевод статьи Choosing the Right Typography for Your Website
Безопасные шрифты — Xiper.net
Автор: Александр Головко, помогала Татьяна Шкабко Дата публикации: 10.03.2010
Начиная верстать макет, необходимо в частности указать в CSS используемые на странице шрифты. Зачастую различными шрифтами дизайнер набирает не только основной текст страницы, но и разнообразные заголовки, логотипы, вензеля:
Хороший дизайнер, как и хороший верстальщик, знает, что браузер может использовать для отображения страницы только те шрифты, которые установлены на компьютере у пользователя. То есть шрифты можно условно разделить на две категории:
- Шрифты, которые без проблем отобразятся у подавляющего большинства пользователей.
- Шрифты, которые у достаточно большой группы пользователей отсутствуют.
Если дизайнер использовал шрифты второй категории для создания, наример, логотипа или крупных статичных заголовков, можно не колеблясь использовать прием замены текста картинкой. Недостаток применения этого приема — негибкость. В случае изменений в тексте придется переделывать картинку и менять CSS (например, если размеры новой картинки не совпадут со старой).
Можно сказать, что опасность применения приема напрямую зависит от вероятности смены текста. Поэтому делать, например, общий текст страницы нестандартными шрифтами нельзя! Грамотный дизайнер так никогда не поступит. А если дизайнер попался зеленый, хороший верстальщик просто обязан исправить его ошибку — в верстке подменить данный шрифт максимально похожим стандартным.
Но как же отличить шрифты первой группы от второй? Ясно что на набор шрифтов, установленный непосредственно на твоем компьютере опираться нельзя! Давайте разбираться.
Стандартные шрифты
Стандартные шрифты — это набор шрифтов, устанавливаемый вместе с операционной системой. Поскольку операционные системы бывают разные, то и набор шрифтов у них разный. Перечень стандартных шрифтов разных версий Windows можно посмотреть, например, в статье Стандартные шрифты Windows, а перечень стандартных шрифтов Mac OS на странице Шрифты, поставляемые с Mac OS. Что касается Unix/Linux операционных систем то единый набор шрифтов у них отсутствует. Многие пользователи Linux используют набор шрифтов DejaVu, в частности на Ubuntu они установлены по умолчанию. Согласно статистике http://www.codestyle.org у многих Unix/Linux пользователей также установлены наборы шрифтов URW, Free и другие. Согласно этой же статистике, больше 60% пользователей Unix/Linux имеют на своем компьютере шрифты набора Core fonts for the Web, который до 2002 года был официально доступен для бесплатного скачивания на сайте Microsoft.
Для того, чтобы страничка могла отображаться так, как задумал дизайнер, в любой операционной системе, существует возможность в CSS свойстве font-family задавать несколько шрифтов, перечисленных через запятую.
Это свойство специфицирует приоритетный список имен семейств шрифтов и/или названий родовых семейств. Согласно спецификации CSS2 есть два типа имен семейств шрифтов:
- Имя семейства шрифтов по выбору. Например «Times new Roman», «Arial» и другие. Имена семейств шрифтов, содержащие пробелы, должны заключаться в кавычки. Если кавычки отсутствуют, любые символы пробела до и после имени шрифта игнорируются, а любая последовательность пробелов внутри имени шрифта конвертируется в одиночный пробел.
- Родовое (общее) семейство. В спецификации определены следующие родовые семейства:
- serif — шрифты с засечками на концах;
- sans-serif — шрифты без засечек;
- cursive — шрифты курсивного начертания;
- fantasy — декоративные шрифты;
- monospace — моноширинный шрифт(с буквами одинаковой ширины).
Таким образом для дизайна берется стандартный шрифт из OS Windows, подбирается к нему похожий для Mac OS и Unix/Linux, задается общее семейство шрифтов и готово.
Но не все так просто. Покопаем детальнее.
В поисках Web-безопасных шрифтов
В интернете исторически сложилось такое понятие как «безопасные» Web-шрифты. Безопасным шрифтом можно назвать такой шрифт, который является стандартным для всех операционных систем. Поскольку о таком положении дел остается только мечтать, то абсолютно безопасных шрифтов не существует!
Отдельные шрифты можно назвать безопасными с некоторыми оговорками.
Основой для определения «безопасных» шрифтов послужили шрифты наиболее распространенной операционной системы Windows, которые кроме того используются в других ОС. Примером такого использования служит уже упоминавшийся пакет шрифтов Core fonts for the Web, который, согласно статистике, скачало множество пользователей Unix/Linux.
В это пакет входят следующие шрифты: Andale Mono, Arial Black, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings. Все они поддерживают кириллицу, что немаловажно для рунета.
В набор шрифтов входящих в стандартную поставку Mac OS X (эта ОС имеет наибольшее распространение среди пользователей Mac OS) входят все шрифты набора Core fonts for the Web.
Таким образом на основе шрифтов Windows, использующихся в других ОС сформировался следующий список так называемых «безопасных» Web-шрифтов:
- Arial
- Arial Black
- Comic Sans MS
- Courier New
- Georgia
- Impact
- Times New Roman
- Trebuchet MS
- Verdana
Шрифт Webdings содержит набор пиктограмм, поэтому не может использоваться для контента. Andale Mono не получает широкого применения, поскольку плохо годится для повседневного чтения текста с экрана и есть не у всех пользователей Windows.
Все эти шрифты есть у каждого пользователя Windows, Mac OS X и у подавляющего большинства пользователей Unix/Linux (т.е. у тех, которые установили у себя пакет Core fonts for the Web).
А как же быть с остальными? Ведь хочется, чтобы замысел дизайнера увидело как можно большее число пользователей!
Об этом читайте во второй части публикации:
Верстальщику о шрифтах. Часть II : Соответствия шрифтов Windows, Mac и Unix/Linux
Материалы:
Таблица безопасных web шрифтов
Если вы по каким-то причинам не можете подгружать шрифты со сторонних сайтов или не хотите возиться с конвертацией шрифтов в разные форматы, для разных браузеров и систем, то вы можете использовать безопасные шрифты, которые присутствуют практически на любом устройстве.
Данный список представляет наиболее совместимые шрифты, которые выглядят практически одинаково во всех основных системах и устройствах. Нажмите на понравившийся шрифт, чтобы увидеть все символы и примеры текста.
Описание шрифта
Примеры текстовfont-family: Arial, sans-serif;
Arial
Семейство шрифтов sans-serifИз рассудительности и скромности, смешанных с мужеством, может возникнуть и третья добродетель — справедливость.The price good men pay for indifference to public affairs is to be ruled by evil menfont-family: Arial Black, sans-serif;
Arial Black
Семейство шрифтов sans-serifИз рассудительности и скромности, смешанных с мужеством, может возникнуть и третья добродетель — справедливость.The price good men pay for indifference to public affairs is to be ruled by evil menfont-family: Comic Sans MS, cursive;
Comic Sans MS
Семейство шрифтов cursiveИз рассудительности и скромности, смешанных с мужеством, может возникнуть и третья добродетель — справедливость.The price good men pay for indifference to public affairs is to be ruled by evil menfont-family: Courier New, monospace;
Courier New
Семейство шрифтов monospaceИз рассудительности и скромности, смешанных с мужеством, может возникнуть и третья добродетель — справедливость.The price good men pay for indifference to public affairs is to be ruled by evil menfont-family: Georgia, serif;
Georgia
Семейство шрифтов serifИз рассудительности и скромности, смешанных с мужеством, может возникнуть и третья добродетель — справедливость.The price good men pay for indifference to public affairs is to be ruled by evil menfont-family: Impact, Impact, Charcoal, sans-serif;
Impact (Impact, Charcoal в MacOs)
Семейство шрифтов sans-serifИз рассудительности и скромности, смешанных с мужеством, может возникнуть и третья добродетель — справедливость.The price good men pay for indifference to public affairs is to be ruled by evil menfont-family: Lucida Console, Monaco, monospace;
Lucida Console (Monaco в MacOs)
Семейство шрифтов monospaceИз рассудительности и скромности, смешанных с мужеством, может возникнуть и третья добродетель — справедливость.The price good men pay for indifference to public affairs is to be ruled by evil menfont-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
Lucida Sans Unicode (Lucida Grande в MacOs)
Семейство шрифтов sans-serifИз рассудительности и скромности, смешанных с мужеством, может возникнуть и третья добродетель — справедливость.The price good men pay for indifference to public affairs is to be ruled by evil menfont-family: Palatino Linotype, Book Antiqua, Palatino, serif;
Palatino Linotype, Book Antiqua (Palatino в MacOs)
Семейство шрифтов serifИз рассудительности и скромности, смешанных с мужеством, может возникнуть и третья добродетель — справедливость.The price good men pay for indifference to public affairs is to be ruled by evil menfont-family: Tahoma, Geneva, sans-serif;
Tahoma (Geneva в MacOs)
Семейство шрифтов sans-serifИз рассудительности и скромности, смешанных с мужеством, может возникнуть и третья добродетель — справедливость.The price good men pay for indifference to public affairs is to be ruled by evil menfont-family: Times New Roman, Times New Roman, Times, serif;
Times New Roman (Times New Roman, Times в MacOs)
Семейство шрифтов serifИз рассудительности и скромности, смешанных с мужеством, может возникнуть и третья добродетель — справедливость.The price good men pay for indifference to public affairs is to be ruled by evil menfont-family: Trebuchet MS, sans-serif;
Trebuchet MS
Семейство шрифтов sans-serifИз рассудительности и скромности, смешанных с мужеством, может возникнуть и третья добродетель — справедливость.The price good men pay for indifference to public affairs is to be ruled by evil menfont-family: Verdana, sans-serif;
Verdana
Семейство шрифтов sans-serifИз рассудительности и скромности, смешанных с мужеством, может возникнуть и третья добродетель — справедливость.The price good men pay for indifference to public affairs is to be ruled by evil menfont-family: Symbol;
Symbol
Из рассудительности и скромности, смешанных с мужеством, может возникнуть и третья добродетель — справедливость.The price good men pay for indifference to public affairs is to be ruled by evil menfont-family: Webdings;
Webdings
Из рассудительности и скромности, смешанных с мужеством, может возникнуть и третья добродетель — справедливость.The price good men pay for indifference to public affairs is to be ruled by evil menfont-family: Wingdings, Zapf Dingbats;
Wingdings (Zapf Dingbats в MacOs)
Из рассудительности и скромности, смешанных с мужеством, может возникнуть и третья добродетель — справедливость.The price good men pay for indifference to public affairs is to be ruled by evil menfont-family: MS Sans Serif, Geneva, sans-serif;
MS Sans Serif (Geneva в MacOs)
Семейство шрифтов sans-serifИз рассудительности и скромности, смешанных с мужеством, может возникнуть и третья добродетель — справедливость.The price good men pay for indifference to public affairs is to be ruled by evil menfont-family: MS Serif, New York, serif;
MS Serif (New York в MacOs)
Семейство шрифтов serifИз рассудительности и скромности, смешанных с мужеством, может возникнуть и третья добродетель — справедливость.The price good men pay for indifference to public affairs is to be ruled by evil menДля безопасного использования шрифтов на сайте необходимо добавить всё семейство через запятую.
Есть необходимость в наших услугах?
Заполните форму и мы с радостью Вам ответим
Закрыть форму
Системные шрифты, подключение шрифтов к сайту
Шрифты — это неотъемлемая и очень важная часть дизайна сайта, подчеркивающая его индивидуальность. В статье пойдет речь о подключении стандартных шрифтов к веб странице, их еще называют системными, а в следующей статье подробно рассмотрим выбор и подключение шрифтов от Google Fonts к сайту WordPress.
Содержание статьи:
Системные, стандартные, безопасные шрифты
Любой браузер отображает только те шрифты, которые присутствуют в операционной системе компьютера. Поэтому их и называют системными и устанавливаются по умолчанию вместе с операционной системой.
А безопасными шрифтами их называют, потому что с большой вероятностью они отобразятся в браузере у большенства посетителей сайта.
Но вся проблема заключается в том, что в разных операционных системах устанавливаются разные наборы шрифтов. Посмотреть наборы поставляемых шрифтов вместе с операционной системой можно на официальных страницах Windows, Mac OS. А в Unix/Linux вообще нет стандартного набора.
Для того, чтобы интернет страничка отображалась в соответствии с задумкой дизайнера, в CSS установили свойство шрифтов, которое называется font-family
Свойство шрифтов font-family
Свойство font-family — семейства шрифтов, сгруппированные по определенным признакам.
Родовые семейства:
- serif — шрифты с засечками на концах;
- sans-serif — шрифты без засечек;
- cursive — шрифты курсивного начертания;
- fantasy — декоративные шрифты;
- monospace — моноширинный шрифт(с буквами одинаковой ширины).
Таким образом просто подбираются похожие шрифты из разных операционных систем и через запятую подключаются к интернет странице.
Вот как пример, просто для визуального восприятия. К этому примеру мы еще вернемся, когда будет рассматриваться непосредственно подключение шрифтов.
Просто проследите логику и все станет предельно ясно.
body {
font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
}Разберем написанное:
- OC Windows — Arial;
- OC Mac OS — Helvetica CY;
- OC Unix/Linux — Nimbus Sans L;
- Родовое семейство — sans-serif.
Так называемые безопасные шрифты
На основе OC Windows был составлен список из нескольких безопасных шрифтов.
- Arial
- Arial Black
- Comic Sans MS
- Courier New
- Georgia
- Impact
- Times New Roman
- Trebuchet MS
- Verdana
Все эти шрифты установлены на Mac OS X, Windows, и у многих пользователей Unix/Linux, у которых установлен пакет Core fonts for the Web.
Для остальных пользователей предусмотрена таблица соответствия. В ней подобраны похожие шрифты, принадлежащие к определенному семейству.
Таблица соответствия и принадлежности шрифтов к определенному семейству:
| Windows | Mac OS | Unix/Linux | Родовое семейство |
|---|---|---|---|
| Arial Black | Helvetica CY | Nimbus Sans L | Sans-serif |
| Arial | Helvetica CY | Nimbus Sans L | Sans-serif |
| Comic Sans MS | Monaco CY | * (см. ниже) | cursive |
| Courier New | * (см. ниже) | Nimbus Mono L | Monospace |
| Georgia | * (см. ниже) | Century Schoolbook L | Serif |
| Impact | Charcoal CY | * (см. ниже) | Sans-serif |
| Times New Roman | Times CY | Nimbus Roman No9 L | Serif |
| Trebuchet MS | Helvetica CY | * (см. ниже) | Sans-serif |
| Verdana | Geneva CY | DejaVu Sans | Sans-serif |
* При подключении шрифтов, можете смело опираться на нее. Таблица поддерживает кириллические символы, русский алфавит.
Саму таблицу я взял в этой статье.
Подключение системных шрифтов к сайту
Подключить системные шрифты к сайту можно несколькими способами. Помимо этого можно подключать разные шрифты к разным параграфам. Применять различные шрифты к отдельным словам и словосочетаниям. Все это я сейчас постараюсь рассмотреть.
Итак, давайте все по порядку.
Подключение шрифтов в CSS файле
Если нужно подключить основной шрифт для всего документа, нужно всего навсего в таблицу стилей добавить такой код:
body {
font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* подлючаем шрифт к всему документу */
font-size: 16px; /* дополнительно устанавливаем размер шрифта */
font-weight: 400; /* устанавливаем жирность шрифта, либо вместо 400, ставим значение — normal */
}Назначаем шрифт для заголовков h2, h3, h4, h5, H5, H6, (здесь аналогично, только устанавливаем значение жирности, для выделения заголовков):
h2,h3,h4,h5,h5,h6{
font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* подлючаем шрифт к заголовкам */
font-weight: 600; /* устанавливаем жирность шрифта, либо вместо 600, ставим значение — bold */
}Присваиваем шрифт только параграфам:
p{
font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* подлючаем шрифт к параграфам, можно применять к спискам li, блокам div, формам form и другим элементам */
font-weight: normal; /* устанавливаем жирность шрифта, либо вместо 600, ставим значение — bold */
font-size: 16px; /* дополнительно устанавливаем размер шрифта параграфам */
}Что-бы присвоить шрифт только к определенному параграфу, или блоку, нужно сначала в HTML документе назначить класс этому блоку
<p>Здесь параграф с назначаемым шрифтом</p>
А в таблице CSS прописать следующий код:
.font{
font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* подлючаем шрифт к определенным параграфам, можно применять к отдельным спискам li, блокам div, формам form и другим элементам */
font-weight: normal; /* устанавливаем жирность шрифта, либо вместо 600, ставим значение — bold */
font-size: 16px; /* дополнительно устанавливаем размер шрифта параграфам */
}Теперь, каждому тегу — элементу html с классом .font (называйте как вам угодно), будет присвоен шрифт Arial, с нормальной (400), жирностью и размером 16 пикселей.
Аналогично можно присвоить разные шрифты к спискам li, таблицам table, к целым блокам div, к отдельным словам, или словосочетаниям.
Подключение шрифтов в HTML документе
Непосредственно в HTML документ шрифты подключаются аналогично CSS файлу, разница лишь в синтаксисе. Можно подключит шрифты в заголовке документа — между тегами <head></head> (аналогично CSS файлу) , либо inline — присвоение свойств напрямую к html тегам.
Подключаем шрифты в заголовке, между тегами <head></head>. Для этого в html документ добавьте такой код:
<head>
<!-- Начало кода -->
<style>
body {
font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* подлючаем шрифт к всему документу */
font-size: 16px; /* дополнительно устанавливаем размер шрифта */
font-weight: 400; /* устанавливаем жирность шрифта, либо вместо 400, ставим значение — normal */
}
</style>
<!-- Окончание кода -->
</head>Здесь я повторяться не буду. Все аналогично подключению в CSS файле.
Подключение шрифтов inline, непосредственно к элементам сайта. Приведу несколько примеров:
Подключаем шрифт к параграфу
<pHelvetica CY", "Nimbus Sans L", sans-serif; font-size: 16px; font-weight: 400;">Здесь параграф с текстом</p>
Выделяем жирным шрифтом отдельное слово и присваиваем отдельный от основного шрифт
<p>Здесь параграф с текстом, а это <spanHelvetica CY", "Nimbus Sans L", sans-serif; font-size: 16px; font-weight: bold;">слово</span>, которое нужно выделить жирным</p>
Выделяем жирным шрифтом ссылку и присваиваем отдельный от основного шрифт
<a href="#"Helvetica CY", "Nimbus Sans L", sans-serif; font-size: 16px; font-weight: bold;">Здесь ссылка</a>
Аналогично назначаем шрифты любому html тегу.
Но все же лучше всего и рекомендовано присваивать стили элементам через файл CSS. Во-первых, в CSS нужно прописать стили один лишь раз и потом назначать в HTML лишь нужный класс. Во-вторых, прописывая стили inline создаются дубли контента. Эти свойства и классы, вроде как, индексируются поисковиками и слышал, что в W3C хотят вообще отменить inline. Хотя иногда так прописывать стили проще.
Все. Следите за обновлениями сайта, готовлю статью о подключении нестандартных и оригинальных шрифтов к сайту так, чтобы они корректно отображались во всех браузерах. А также познакомлю вас с несколькими хорошими сервисами, где можно выбрать нестандартные шрифты.
Самая подробная информация женские платья купить в интернет магазине недорого здесь.
Лучший способ отблагодарить автора
Похожие по Тегам статьи
Каталог качественных шрифтов для Web — BestFonts.pro
Уважаемые посетители, приветствуем вас на BestFonts.pro, где можно бесплатно скачать шрифты и потом использовать у себя на сайте или установить в MacOS и Windows. Представленные на портале наборы также легко подключить к Photoshop, Figma и Sketch или редакторам для вёрстки вроде Adobe InDesign. Для вашего удобства гарнитуры разделены по категориям с фильтрами быстрого отбора.
На сайте вы найдёте сотни латинских и кириллических шрифтов, которые легко отсортировать по дате добавления, рейтингу популярности, количеству просмотров и имени комплекта. Если интересует какой-то определённый набор, и вы точно знаете его название, воспользуйтесь формой поиска. Поисковая система на основе технологий Google покажет подходящие запросу коллекции в считанные секунды.
Когда шрифт требуется для решения конкретной задачи, совсем не обязательно скачивать весь комплект. Загрузите только нужное начертание. Специально для новичков, которые впервые сталкиваются с установкой, написана подробная инструкция, где объясняются ключевые моменты инсталляции. После изучения статьи подключение гарнитур будет занимать у вас не больше 1-2 минут.
На страницах с отдельными шрифтами приводится информация об авторстве, условиях распространения и поддерживаемых алфавитах. При желании у вас есть возможность прочитать подробное описание гарнитуры и посмотреть, как выглядят символы на разных языках и с меньшим или большим размером. Функционал сайта позволяет ввести свой текст и оценить стиль оформления в режиме реального времени.
На портале доступны самые популярные форматы шрифтов – TTF, EOT, WOFF и WOFF2. Для скачивания файлов щёлкните по названию или кнопке WEB. Обратите внимание, что внизу страниц с гарнитурами размещается форма комментирования. Если успешно использовали тот или иной шрифтовой набор для оформления страниц в печатных изданиях или на интернет-сайтах, обязательно поделитесь опытом.
Команда портала постоянно добавляет новые шрифты и публикует интересные тематические статьи. Однако мы будем рады любой поддержке со стороны посетителей. Во-первых, вы можете помочь нам материально или поделиться ссылкой на сайт с друзьями в социальных сетях и популярных мессенджерах. Во-вторых, предложите нам гарнитуру, которой пока нет в каталоге, и её быстро разместят на страницах ресурса.
Пожалуйста поделись ссылкой с друзьями, это очень поможет развитию этого проекта.
или помочь проекту!