Моноширинный шрифт как сделать

Добавил пользователь Евгений Кузнецов
Обновлено: 09.09.2024

После цвета шрифт — возможно, важнейшее свойство страницы. На этой странице я не буду демонстрировать никаких "трюков", но покажу ряд вариаций шрифтов, допустимых в CSS.

Поскольку не все шрифты доступны на всех компьютерах (существуют тысячи шрифтов и большинство из них не бесплатны), CSS предусматривает резервную систему. Первым вы указываете шрифт, который хотели бы использовать. Затем следуют любые шрифты, которые вы могли бы использовать, если первый указанный шрифт не доступен. А закончить список вы должны типовым шрифтом, который имеет 5 видов: serif, sans-serif, monospace, cursive и fantasy.

Стили шрифтов

Большинство шрифтов имеют разнообразные стили в пределах одного и того же шрифтового семейства. Обычно это жирный стиль (bold) или курсив (italic), часто встречается также стиль "жирный курсив" (bold italic), реже — капитель (малые прописные буквы — small-caps), а в ряде случаев — экстра-светлые/экстра-жирные или растянутые/сжатые версии.

Модуль "Шрифты" в CSS имеет больше свойств для указания специальных стилей (для шрифтов, которые поддерживают несколько вариантов), в частности, свойство font-variant имеет гораздо больше значений.

Навигация по сайту

Bert Bos, style activity lead
Copyright © 1994–2021 W3C ® Privacy policy

Программисты любят псевдографику. В любом языке полно составных знаков: -> , , ++ , := . По смыслу это один символ, но составленный из нескольких более простых. Мозгу требуются дополнительные усилия на то, чтобы считать и объединять такие конструкции на лету. Когда-нибудь, возможно, всех спасет Юникод, где символов хватит на сто языков вперед — если придумают удобный способ ввода и отомрет всё легаси. Но пока нам приходится читать и писать код в ASCII.

Казалось бы, дело швах. Но в апреле 2014 года Ian Tuomi придумал изящный выход: заменять часто встречающиеся последовательности лигатурами. Моноширинность при этом не ломается (если сделать ширину лигатуры кратной количеству символов, в нее входящих), код тоже не портится (лигатуры — чисто визуальная фича). Зато можно вместо -> нарисовать настоящую стрелочку. Это сильно облегчает мозгу сканирование и токенизацию кода: там, где по смыслу один символ, теперь и нарисован один символ. Самое главное, что это работает с любым, даже уже написанным кодом.

Так родился шрифт Hasklig: это Адобовский Source Code Pro, дополненный лигатурами для программ на Хаскелле. Выглядит это так:

Сравните с чистым Source Code Pro без лигатур:

Есть и нюансы: далеко не во всех редакторах это работает. Из маковских это построенные на веб-движках Atom и LightTable, BBEdit, последние сборки TextMate, про остальные смотрите в README к репозиторию. Если я правильно понимаю, очень хорошо дела обстоят у линуксовых редакторов. Будем надеяться, что если идея наберет популярность, остальные подтянутся.

У Hasklig, впрочем, есть три принципиальных недостатка: он содержит только лигатуры, присутствующие в Хаскелле, и он основан на Source Code Pro, и у него нет кириллицы.

Эти проблемы призван решить Fira Code: шрифт, основанный на открытом шрифте Fira Mono от Мозиллы, дополненный лигатурами для большинства языков программирования. Картинки:

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

Не понял мысли. У меня один css - для всех страниц, которые я открываю в браузере. Кругом используется один шрифт, но я хочу, чтобы для моноширинного использовался, например, courier new. Как это сделать?

Аааа, я не девелопер, я не разрабатываю страницы. Мне нужен пример для моего css!

Это для _любого_ текста, кроме моноширинного:

А что должно быть для явного указания шрифта для моноширинного тектса?

>А что должно быть для явного указания шрифта для моноширинного тектса?

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

Спасибо, а в настройках браузера можно отключить background-image для страниц?

Моноширинные шрифты с кириллицей для программирования

Если ваша профессия связана с программированием, то вам приходится большое количество времени проводить за монитором. Поэтому, к выбору подходящего шрифта для системы надо подходить не менее тщательно, чем к выбору инструментов программирования. Мои требования к шрифту для работы: моноширинный, наличие кириллицы, визуальное различие между буквой "O" и цифрой "0", ну и, конечно же, не напрягающий глаза при длительной работе в редакторе кода. За все время у меня собралась небольшая коллекция шрифтов для программирования, может быть какой-нибудь вам тоже понравится.

Для каждого шрифта я сделал скриншот с использованием всех печатных символов, в том числе и кириллицы. Система Windows, сглаживание шрифтов включено. Некоторые из шрифтов коммерческие, но кого это волнует? ;)

Шрифт Andale Mono

Шрифт Anka/Coder

Шрифт Anonymous Pro

Шрифт Anonymous Pro - один из моих любимых шрифтов. Создан дизайнером Марком Симонсоном специально для программистов. Отлично смотрится в любом размере.

Шрифт Anonymous Pro

Шрифт Consolas

Шрифт Cousine

Шрифт DejaVu Sans Mono

DejaVu Sans Mono - еще один из моих любимых шрифтов. Периодически перехожу на него с Anonymous Pro и возвращаюсь обратно, не в силах выбрать какой-то один. Оба шрифта просто замечательные.

Шрифт DejaVu Sans Mono

Шрифт Droid Sans Mono

Droid Sans Mono изначально разрабатывался для отображения на экранах мобильных устройств, но также неплохо подходит для IDE на небольших экранах, например, на нетбуках. Недостатки - ноль не перечеркнут и криво отображается символ нумерации.

Шрифт Droid Sans Mono

Шрифт Fira Mono

Шрифт Hack

Шрифт Inconsolata

Шрифт Input Mono Compressed

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

Шрифт Input Mono

Шрифт Iosevka

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

Шрифт Iosevka

Шрифт Liberation Mono

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

Шрифт Liberation Mono

Шрифт PragmataPro

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

Шрифт PragmataPro

Шрифт PragmataPro Mono

Шрифт PT Mono

Шрифт Ubuntu Mono

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

Читайте также: