Какие шрифты есть и в linux и в windows

Эта статья является продолжением статьи Верстальщику о шрифтах. Часть I: Безопасные шрифты.

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

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

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

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

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

			body {
				font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
				}
			

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

Образцы подобных линеек можно увидеть, например, в Dreamweaver.

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

Но мы то теперь знаем, что означает эта строка, не правда ли? И уже можем правильно ее использовать.

Но почему же строка построенная нами так сильно отличается от привычного по Dreamweaver:

			body {
				font-family: Arial, Helvetica, sans-serif;
				}
			

Кроме того, что в таблице учитываются шрифты 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 (см. пояснение выше).

Выводы:

1. Абсолютно безопасных шрифтов не существует. Условно безопасными можно назвать следующие шрифты:
   • Arial
   • Arial Black
   • Comic Sans MS
   • Courier New
   • Georgia
   • Impact
   • Times New Roman
   • Trebuchet MS
   • Verdana
2. Безопасные CSS стеки, учитывающие поддержку кирилицы в шрифтах, можно посмотреть в статье Безопасные шрифтовые CSS стеки для рунета.
3. Если на странице поддержка кириллицы не важна, используем CSS стеки из статьи Безопасные шрифтовые CSS стеки для англоязычных текстов.

Материалы:

• Microsoft Typography:: Core fonts for the Web
• Microsoft Typography:: Fonts supplied with Mac OS
• Alan Wood’s Unicode Resources:: Unicode fonts for Macintosh OS 9 computers
• Linux Font Equivalents to Popular Web Typefaces
• Common fonts to all versions of Windows & Mac equivalents
• Complete Guide to Pre-Installed Fonts in Linux, Mac, and Windows

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

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

Перед тем, как определиться с выбором шрифта, необходимо понять, что каждая операционная система имеет свой набор предустановленных шрифтов, из которых она выбирает по умолчанию. В случае Linux наиболее популярным дистрибутивом является Ubuntu. Поэтому наиболее интересным является вопрос: «Какой шрифт по умолчанию совместим для Linux и Windows?»

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

Linux:

1. Sans-serif – шрифт без засечек, применяемый для заголовков и текста.
2. Serif – шрифт с засечками, применяемый для больших блоков текста.
3. Monospace – моноширинный шрифт, в котором каждый символ занимает одинаковое количество горизонтального пространства.

Windows:

1. Arial – наиболее популярный шрифт для веб-разработки. Имеет сходство с Helvetica, но доступен только на платформе Windows.
2. Times New Roman – шрифт с засечками, предназначенный для больших блоков текста.
3. Courier New – моноширинный шрифт широко используется для программирования и отображения кода.

Теперь давайте рассмотрим несколько шрифтов, которые являются наиболее совместимыми с обеими ОС – Linux и Windows:

1. Liberation Sans – этот шрифт был создан с целью предоставить замену для Arial. Он имеет сходство с Arial и хорошо подходит для веб-разработки на обеих платформах.

Пример CSS-кода для использования Liberation Sans в качестве шрифта по умолчанию:

   body {
       font-family: "Liberation Sans", Arial, sans-serif;
   }

2. DejaVu Sans – этот шрифт также является заменой для Arial и обеспечивает отличную совместимость с обеими платформами.

Пример CSS-кода для использования DejaVu Sans в качестве шрифта по умолчанию:

   body {
       font-family: "DejaVu Sans", Arial, sans-serif;
   }

3. Noto Sans – это шрифт, разработанный Google, который поддерживает широкий набор символов из разных письменностей. Он также обладает совместимостью с Linux и Windows.

Пример CSS-кода для использования Noto Sans в качестве шрифта по умолчанию:

   body {
       font-family: "Noto Sans", Arial, sans-serif;
   }

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

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

Итак, при выборе шрифта по умолчанию для Linux и Windows вам следует обратить внимание на шрифты, которые имеют аналоги на разных платформах. Liberation Sans, DejaVu Sans и Noto Sans – это лишь несколько примеров шрифтов, которые отлично работают на обоих ОС. Это поможет создать единообразный и качественный дизайн веб-сайта, независимо от операционной системы, используемой вашими пользователями.

We’ll start with two commands to get the available fonts

fc-list : family | sort -u > ubuntu-fonts
wget -qO- $H='Accept-Language: en-us,en;q=0.5' $H='Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8' $H='Connection: keep-alive' -U 'Mozilla/5.0 (Windows NT 5.1; rv:10.0.2) Gecko/20100101 Firefox/10.0.2' --referer=/ https://www.microsoft.com/typography/Fonts/product.aspx?PID=161 | grep -Po '(?<=FMID=\d{4}">)[^<>]+' | sort -u > windows-fonts

You could probably do something more clever if you were on Windows but I am not so I have to settle for grepping the online documentation.

I’m also running my version of this on a Ubuntu Live DVD.

Anyway we have two sorted files so we can just compare them to see which fonts exist in both files and we get our answer

$ comm -12 ubuntu-fonts windows-fonts
Symbol

So to answer your question: they share one font

But even then, I bet that’s just a name clash.

This is obviously a problem for developers and designers. You want everything to look the same everywhere and not having a common base makes that a lot harder. There are a few options:

• Rasterise or vectorise your graphics so they’re static graphics rather than text. Depending on the situation this might even be faster but it’s also usually a lot less accessible. Screen-readers, for example, won’t be able to parse them.
• If you can, use WebFonts or otherwise bundle the font along with your application. This will need a permissive enough license for the font you want to use so that could be expensive or limiting, depending on the fonts you use. It also uses more bandwidth but that hasn’t stopped the web embracing them.
• Use similar fonts. There exist lists of near-interchangeable defaults but Graphic Design might be the place to ask.

Which of these best applies really depends on what you’re doing… But it’s impossible to realistically assume any one font will exist somewhere else.

You should also consider that the same font might not render the same in each situation. For example, there are various antialiasing techniques that make a web page look quite different from platform to platform.

It’s really annoying.
All you can do is test try to make things as consistent as possible on any one platform.

0

1