как узнать какие шрифты поддерживают кириллицу

Верстальщику о шрифтах. Безопасные шрифты.

Начиная верстать макет, необходимо в частности указать в 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 есть два типа имен семейств шрифтов:

Имена родовых семейств являются ключевыми словами и не обязательно должны заключаться в кавычки.

Таким образом для дизайна берется стандартный шрифт из 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-шрифтов:

Шрифт Webdings содержит набор пиктограмм, поэтому не может использоваться для контента. Andale Mono не получает широкого применения, поскольку плохо годится для повседневного чтения текста с экрана и есть не у всех пользователей Windows.

Все эти шрифты есть у каждого пользователя Windows, Mac OS X и у подавляющего большинства пользователей Unix/Linux (т.е. у тех, которые установили у себя пакет Core fonts for the Web).

А как же быть с остальными? Ведь хочется, чтобы замысел дизайнера увидело как можно большее число пользователей!

Шрифты поддерживающие кириллицу

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

Ниже приведена таблица соответствий шрифтов.

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

Например, если основным текстом макета является Arial, находим в табличке этот шрифт и в CSS пишем соответствующую ему строчку:

Эта запись означает, что если у пользователя есть шрифт Arial (а он есть у всех пользователей Windows и всех пользователи Mac OS X), то страница отобразися этим шрифтом. Если же у пользователя нет этого шрифта, то страничка русскоязычного пользователя Mac OS 9 точно отобразится стандартным системным шрифтом Helvetica CY, а у пользователя Unix/Linux отобразися шрифтом Nimbus Sans L который установлен у 90% пользователей Unix/Linux. Если же пользователь Unix/Linux принадлежит в тем 10%, у которых нет этого шрифта, то страница отобразится тем шрифтом с засечками, который установлен для просмотра Web-страниц по умолчанию.

Кроме того, что в таблице учитываются шрифты Unix/Linux, там еще после обычного Helvetica идет какой-то странный значок CY. Давайте разбираться, что же это такое!

До выхода Mac OS X эта линейка имела следующее значение: для пользователей Windows отображаем страницу Arial, для пользователей Mac OS 9 — стандартным шрифтом Helvetica, а остальные видят страницу с системным шрифтом без засечек, настроенным по умолчанию в браузере. Но опять же немаловажный нюанс! У стандартного Mac OS 9 шрифта Helvetica нет кириллицы! Для русскоязычной страницы это означало следующее: для пользователей Windows отображаем страницу Arial, для пользователей Mac OS 9 — стандартным шрифтом Helvetica, который выводит нечитаемую информацию, а остальные видят страницу с системным шрифтом без засечек, настроенным по умолчанию в браузере.

Для правильного отображения этого набора у пользователей Mac OS 9 вместо некириллизированной Helvetica, имеет смысл указывать такой же стандартный для Mac OS 9 шрифт Helvetica CY, содержащий кириллицу.

Прочтение линеек после выхода Mac OS X изменилось. Теперь для Windows/Mac OS X указывается один общий стандартный шрифт. А если мы хотим, чтобы замысел дизайнера смогли увидеть пользователи Mac OS 9, для них нужно в линейке шрифтов прописать шрифт содержащий кириллицу.

Таким образом хотя и не существует безопасных шрифтов, существуют безопасные линейки шрифтов. Их еще называют шрифтовыми CSS стеками. В эти линейки помимо стандартных шрифтов Windows/Mac OS X можно включать также эквивалентные шрифты из стандартного набора Mac OS 9 (которая не содержит по умолчанию «безопасных» шрифтов) и распространенных шрифтов Unix/Linux.

Любой верстальщик рано или поздно сталкивается с моментом, когда дизайнер использует в макете шрифт, не входящий в перечень «безопасных»;. Но это еще не повод бить тревогу! Например, дизайнеры очень часто используют на макетах шрифт Tahoma, который не входит в этот перечень. Правильно построенная линейка шрифтов открывает возможность использовать не только Tahoma, но и другие шрифты. Все большее количество дизайнеров пользуются этой возможностью и грамотный верстальщик должен об этом знать.

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

А если без кириллицы?

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

Для шрифтов Arial, Courier New и Times New Roman при составлении линеек лучше указывать сначала шрифт для Unix/Linux, а затем для Mac OS. Это связанно с некоторой кривостью набора Linux шрифтов X11 core fonts set.

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

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

** В данной линейке шрифт Garuda имеет смысл ставить перед Palatino (см. пояснение выше).

Источник

11 бесплатных шрифтов с кириллицей

1. Arimo

Дизайнер: Стив Мэттэсон – увлеченный дизайнер из штата Колорадо. Более 25 лет Мэттэсон разрабатывает шрифты, самыми крупными проектами стали дизайны для Android, Citrix, Microsoft, Nextel и Xbox.

Типы: Regular, Regular Italic, Bold, Bold Italic
Лицензия: Apache License, Version 2.0
Скачать шрифт

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

2. PT Sans

Дизайнер: Дизайнеры Александра Королькова, Ольга Умпелева и Владимир Ефимов.

Типы: Regular, Regular Italic, Bold, Bold Italic
Лицензия: Open Font License
Скачать шрифт

Разработка PT Sans – часть проекта, посвященного 300-летию реформы русского алфавита. Шрифт имеет базовые очертания и классические пропорции. Он распространяется бесплатно, но может быть включён в коммерческие проекты. PT Sans предназначен для официальной и деловой переписки, нормативно-технической документации, обслуживает печатные издания и информационные ресурсы. Хорошо смотрится в печатном и электронном варианте.

3. Vollkorn

Дизайнер: Фридрих Альтаузен – немецкий графический дизайнер.

Типы: Regular, Regular Italic, Semi-Bold, Semi-Bold Italic, Bold, Bold Italic, Black, Black Italic
Лицензия: Open Font License
Скачать шрифт

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

4. Noto Sans

Типы: Regular, Regular Italic, Bold, Bold Italic
Лицензия: Apache License, Version 2.0
Скачать шрифт

Google разработал Noto как универсальное семейство, которое призвано избавить интернет от нечитаемых символов – маленьких прямоугольников, которые встречал каждый. На данный момент шрифт поддерживает латинские, кириллические и греческие символы и охватывает более 30 скриптов.
Шрифт происходит от Droid, о котором мы писали ранее, не имеет засечек и визуально совместим высотой и толщиной штрихов с разными языками. Отлично подходит для использования в интернете.

5. Fira Sans

Дизайнер: Компания Carrois Apostrophe. Студия работает над корпоративными шрифтами. С 1975 года дизайнеры разработали стиль для Suzuki, TYPO3, the Neue National Galerie, and the Museo de Art de Ponce и других.

Типы: Thin, Thin Italic, Extra-Light, Extra-Light Italic, Light, Light Italic, Regular, Regular Italic, Semi-Bold, Semi-Bold Italic, Bold, Bold Italic, Black, Black Italic
Лицензия: Open Font License
Скачать шрифт

Fira Sans – шрифт с классическими очертаниями, без засечек. Такой тип подойдет для написания основного текста, так как подходит для широкого диапазона экранов телефонов. Разработчики предъявили большие требования к разборчивости символов и рендерингу.

6. Certa Sans

Дизайнер: Глен Жан – российский дизайнер из Уфы.

Типы: Thin, Thin Italic, Extra-Light, Extra-Light Italic, Light, Light Italic, Regular, Italic, Medium, Medium Italic, Bold, Bold Italic, Extra Bold, Black, Black Italic
Лицензия:Creative Commons Attribution-NoDerivs License (CC BY-ND)
Скачать шрифт

Certa Sans – шрифт без засечек в 16 начертаниях. Бесплатно доступны два начертания: Medium и Medium Italic, остальные стоят 25$ за тип. Шрифт без засечек, формы грубые, машинные. Certa Sans подойдет для набора большого объема текста.

7. Museo Cyrillic

Дизайнер: Голландская компания exljbris Font Foundry предлагает свои услуги по созданию шрифтов более 15 лет.

Типы: Museo Cyrillic 100, Museo Cyrillic 100 Italic, Museo Cyrillic 300, Museo Cyrillic 300 Italic, Museo Cyrillic 500, Museo Cyrillic 500 Italic, Museo Cyrillic 700, Museo Cyrillic 700 Italic, Museo Cyrillic 900, Museo Cyrillic 900 Italic
Скачать шрифт

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

8. Casper

Дизайнер: Михаил Череда – молодой российский дизайнер из Екатеринбурга.

Типы: Italic, Regular, Bold, Bold Italic
Лицензия: SIL OFL 1.1
Скачать шрифт

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

9. Geometria

Дизайнер: Гаянэ Багдасарян, Вячеслав Кириленко

Типы: Thin Italic, Thin, Medium Italic, Medium, Light, Light Italic, Italic, Regular, Heavy Italic, Heavy, Extra Light Italic, Extra Light, Extra Black Light, Extra Black, Bold, Bold Italic
Скачать шрифт

Шрифт Geometria соответствует названию и имеет точные, строгие формы. Интересную деталь имеют прописные буквы: их талия слегка завышена. Geometria – это нескучно, шрифт подойдет для визиток, презентаций, календарей или интерфейсов. Бесплатно начертание Geometria Light.

10. Raleway

Дизайнер: Мэтт Макинерни, Пабло Импаллари и Родриго Фуэнзалид.

Типы: Thin, Thin Italic, Extra-Light, Extra-Light Italic, Light, Light Italic, Regular, Regular Italic, Medium, Medium Italic, Semi-Bold, Semi-Bold Italic, Bold, Bold Italic, Extra-Bold, Extra-Bold Italic, Black, Black Italic.
Лицензия:Open Font License
Скачать шрифт

Raleway – представитель акцидентных шрифтов, предназначенный для использования в заголовках.

11. Open Sans

Дизайнер: Стив Мэттэсон – дизайнер из штата Колорадо. Более 25 лет Мэттисон разрабатывает шрифты.

Типы: Light; Light Italic; Regular; Regular Italic; Semi-Bold; Semi-Bold Italic; Bold; Bold Italic; Extra-Bold; Extra-Bold Italic.
Лицензия: Apache License, Version 2.0
Скачать шрифт

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

Подборку подготовила копирайтер Логомашины — Алена Коваленко

Источник

Шрифты, общие для всех (актуальных) версий Windows, и их Mac-эквиваленты

Введение

В данном списке перечислены шрифты, общие для всех актуальных на данный момент операционных систем Windows (фактически начиная с Windows 98), и их эквиваленты в Mac OS. Такие шрифты иногда называют «безопасными шрифтами для браузеров» (browser safe fonts). Это небольшой справочник, которым я пользуюсь, когда делаю Web-страницы и думаю, что он будет полезен и Вам.

Если Вы новичок в web-дизайне, то может быть думаете что-нибудь типа: «Почему это я должен ограничиваться таким небольшим набором шрифтов? У меня есть огромная коллекция прекрасных шрифтов!» Дело в том, что браузер посетителя может отобразить только те шрифты, которые установлены в его операционной системе (прим. переводчика: в настоящее время уже есть возможность применять фактически любые шрифты при оформлении страниц используя CSS 3 и его новое свойство @font-face; правда, поддерживают эту функцию пока ещё далеко не все браузеры), а это означает, что каждый посетитель Вашей страницы должен быть обладателем выбранных Вами шрифтов. Поэтому Вы должны использовать только те шрифты, которые есть в каждой операционной системе. К счастью, в CSS есть свойство @font-family, облегчающее эту задачу.

Список

2 Символьные шрифты отображаются только в Internet Explorer, в остальных браузерах они обычно заменяются на стандартный шрифт (хотя, например, шрифт Symbol отображается в Opera, а Webdings — в Safari).

3 Шрифт Book Antiqua практически идентичен Palatino Linotype; Palatino Linotype поставляется с Windows 2000/XP, а Book Antiqua — с Windows 98.

4 Обратите внимание, что эти шрифты не TrueType, а bitmap, поэтому они могут плохо выглядеть с некоторыми размерами (они предназначены для отображения в размерах 8, 10, 12, 14, 18 и 24 pt при 96 DPI).

5 Эти шрифты работают в Safari только в стандартном начертании, но не работают при выделении жирным или курсивом. Comic Sans MS также работает жирным, но не курсивом. Другие Mac-браузеры, кажется, нормально эмулируют отсутствующие у шрифтов свойства самостоятельно (спасибо Christian Fecteau за подсказку).

6 Эти шрифты установливаются в Mac только при Classic-инсталляции

Источник

Безопасные шрифты на кирилице

Так как операционные системы разные, то и наборы шрифтов у них разные, поэтому нужно учесть и прописать шрифты как для Windows, так и для Mac и Unix/Linux.

Основные «безопасные» шрифты

Основой для определения «безопасных» шрифтов послужили шрифты наиболее распространенной операционной системы 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-шрифтов:

Таблица соответствий шрифтов

Для русскоязычных страниц нужно использовать только Unicode шрифты поддерживающие кириллицу.

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

Eсли основным текстом является Arial, находим в табличке этот шрифт и в CSS и прописываем шрифты для всех ОС:

font-family: Arial, «Helvetica CY», «Nimbus Sans L», sans-serif;

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

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

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

Graphic Designer

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse moleste conseuat ven nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent upta. gue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta.

Romana Nasrin Reply

Graphic Designer

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse moleste conseuat ven nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent upta. gue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta.

Leave a comment

Интернет-агентство полного цикла. Создаём проекты и берём их на продвижение, сопровождение и поддержку.

Информация и цены, представленные на сайте, не являются договором публичной оферты.

Источник