Html моноширинный шрифт: font-family | htmlbook.ru

Leave a Comment / Html / By /

Содержание

Как сделать полужирный шрифт в html

6. HTML — Форматирование текста с помощью html-тегов

Если Вы пользуйтесь текстовым редактором, например, таким как Microsoft Word или Microsoft Excel, то Вы должны быть знакомы с форматированием текста и как сделать текст жирным (полужирным), наклонным (курсивом), зачеркнутым или подчеркнутым. Это всего лишь четыре из одиннадцати доступных вариантов, указывающих, как можно форматировать текст в HTML и XHTML.

Содержание

Полужирный или жирный текст

Полужирный шрифт или жирный шрифт в HTML можно задать с помощь двух тегов <b>. </b> и <strong>. </strong>. Все, что находится в тегах <b>. </b> и <strong>. </strong> отображается в HTML жирным текстом (полужирным), как показано ниже:

Пример

Получим следующий результат:

Курсив — наклонный текст или шрифт

Сделать в HTML курсивом текст можно с помощь двух тегов <i>. </i> и <em>. </em>. Все, что находится в тегах курсива <i>. </i> и <em>. </em> отображается в HTML наклонным текстом (шрифтом), как показано ниже:

Пример

Получим следующий результат:

Подчеркнутый текст

Подчеркнуть текст в HTML можно с помощь тега <u>. </u>. Все, что находится внутри тега <u>. </u> отображается в HTML подчеркнутым текстом (шрифтом), как показано ниже:

Пример

Получим следующий результат:

Зачеркнутый текст

Зачеркнуть текст в HTML можно с помощь тега <strike>. </strike>. Все, что находится внутри тега <strike>. </strike> отображается в HTML зачеркнутым текстом (шрифтом), как показано ниже:

Пример

Получим следующий результат:

Моноширинный шрифт

Содержимое элемента <tt>. </tt> записывается в HTML моноширинным шрифтом. Большинство шрифтов обладают переменной шириной, потому что разные буквы имеют разную ширину (например, буква «щ» шире буквы «г»). Однако в моноширинном шрифте каждая буква имеет одинаковую ширину.

Пример

Получим следующий результат:

Верхний индекс

Содержимое тега <sup>. </sup> отображается в HTML в верхнем индексе. Тег верхнего индекса <sup> в HTML имеет тот же размер шрифта, который используют окружающие его символы, но использует он только половину их высоты. Данный элемент хорошо подходит когда необходимо, например, написать в HTML степень числа.

Пример

Получим следующий результат:

Нижний индекс

Содержимое тега <sub>. </sub> отображается в HTML в нижнем индексе. Тег нижнего индекса <sub> в HTML имеет тот же размер шрифта, который используют окружающие его символы, но использует он только половину их высоты.

Пример

Получим следующий результат:

Вставленный текст

Содержимое внутри тега <ins>. </ins> отображается в HTML как вставленный текст.

Пример

Получим следующий результат:

Удаленный текст

Содержимое внутри тега <del>. </del> отображается в HTML как удаленный текст.

Пример

Получим следующий результат:

Большой текст

Содержимое тега <big>. </big> отображается в HTML большим текстом, на один размер шрифта больше, чем остальная часть окружающего его текста, как показано ниже:

Пример

Получим следующий результат:

Маленький текст

Содержимое внутри тега <small>. </small> отображается в HTML маленьким текстом, на один размер шрифта меньше, чем остальная часть окружающего его текста, как показано ниже:

Пример

Получим следующий результат:

Группировка элементов и содержимого страницы в HTML

Элементы <div> и <span> позволяют в HTML группировать несколько элементов для создания секций или подсекций страницы.

Например, Вы можете поместить все ссылки на странице в тег <div>, чтобы указать, что все элементы в этом теге <div> относятся к меню. Затем Вы можете задать стиль тегу <div>, чтобы элементы отображались с использованием специального набора правил стиля (CSS).

Пример с тегом <div>

Получим следующий результат:

С другой стороны, элемент <span> может использоваться для группировки только встроенных элементов. Итак, если у Вас есть часть предложения или абзаца (параграфа), который Вы хотите объединить, Вы можете использовать элемент <span> следующим образом:

Пример с тегом <span>

Получим следующий результат:

Эти теги обычно используются с CSS, чтобы Вы могли задать стиль к секции страницы.

font-weight

Устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900 с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное — 900. Нормальное начертание шрифта (которое установлено по умолчанию) эквивалентно 400, стандартный полужирный текст — значению 700.

Синтаксис
Значения

Насыщенность шрифта задаётся с помощью ключевых слов: bold — полужирное начертание, normal — нормальное начертание. Также допустимо использовать условные единицы от 100 до 900. Значения bolder и lighter изменяют жирность относительно насыщенности родителя, соответственно, в большую и меньшую сторону.

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства font-weight

Объектная модель

[window.]document.getElementById(» elementID «).style.fontWeight

Браузеры

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

Свойство font-weight: толщина начертания

Это задание архивной части. Перейдите по ссылке, чтобы пройти задание в актуальной части.

Полужирность текста можно задавать с помощью свойства font-weight , которое имеет два основных значения:

  1. normal — обычное начертание;
  2. bold — полужирное начертание.

На самом деле это свойство имеет много значений: bold, bolder, lighter, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900. Эти значения задают степень толщины шрифта, от самого тонкого, до самого толстого.

Но большинство браузеров всё равно умеют отображать только два варианта толщины: обычный и полужирный. Поэтому и остальные значения свойства обычно не используют.

  • index.html Сплит-режим
  • style.css Сплит-режим

Спасибо! Мы скоро всё исправим)

Код изменился, нажмите «Обновить» или включите автозапуск.

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

  1. Сделайте текст заголовка нежирным,
  2. текст тегов с классом bold — полужирным
  3. и текст пунктов списка — полужирным.

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

Моноширинный шрифт | это… Что такое Моноширинный шрифт?

Моноширинный шрифт (внизу) в сравнении с пропорциональным

Моноширинный, или непропорциональный шрифт — это шрифт, все знаки (точнее, кегельные площадки знаков) которого имеют одинаковую ширину[1]. Этим он отличается от пропорционального шрифта, в котором литеры отличаются по ширине друг от друга[2].

Следует различать моноширинный и равноширинный шрифты: в последних знаки стремятся к одинаковой ширине, но в реальности кегельные площадки знаков неодинаковы[3].

Содержание

  • 1 История
    • 1.1 Пишущие машинки
    • 1.2 Компьютеры
  • 2 Особенности начертания символов
  • 3 Применение в современной типографике
    • 3. 1 Моноширинные цифры в пропорциональных шрифтах
    • 3.2 HTML
    • 3.3 Восточноазиатские шрифты
  • 4 Примеры моноширинных шрифтов
  • 5 Примечания

История

Пишущие машинки

Первые моноширинные шрифты были разработаны для пишущих машинок, так как реализация механической печати пропорциональным шрифтом требовала значительного усложнения печатающего узла. Существовали и наборно-печатающие машинки, использующие пропорциональный шрифт и изменение межбуквенных интервалов, но они применялись лишь в оперативной полиграфии[4]. Конструкция электромеханических печатных машинок и телеграфных аппаратов в большинстве своём также предполагала использование моноширинных шрифтов.

Компьютеры

Пример интерфейса программы (FAR), использующей псевдографику и моноширинные шрифты

Жизнь моноширинных шрифтов продолжилась на компьютерах: алфавитно-цифровые печатающие устройства (например — принтеры типа «ромашка») и знакогенераторы видеотерминалов и графических адаптеров ранних компьютеров также позволяли использовать исключительно моноширинные шрифты. Видеопамять текстовых режимов хранила информацию в виде матрицы знакомест, в которую могло поместиться строго определённое их количество (например, 80 в ширину и 25 в высоту на адаптерах от MDA до VGA у IBM PC[5]), а видеоизображение динамически создавалось по кодам символов и их изображениям — это давало экономию дорогой (в те времена) памяти и упрощало программирование.

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

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

Особенности начертания символов

Буквы многих алфавитов (латинского — в большей степени, современного русского — в меньшей) имеют разную ширину знаков. Некоторые знаки (такие, как i) занимают в кегельной площадке место шириной в один основной штрих, а другие (такие, как w) — в несколько раз больше[3]. Поэтому при создании моноширинного шрифта возникают проблемы:

  • Вокруг узких знаков образуется много пустого места;
  • Широкие знаки становятся не только более тёмными, но и сложноразличимыми, особенно при небольшом разрешении и в жирном начертании.

Чтобы эти недостатки не были столь заметны, к буквам применяются дополнительные меры оптической компенсации. Узким буквам добавляют засечки, даже если остальные символы шрифта выполнены без засечек. У широких символов иногда уменьшают некоторые элементы, такие как средний штрих у буквы «Ш». Ещё при проектировании моноширинных шрифтов возникает проблема схожести цифры 0 и буквы O, и чтобы их можно было отличить, первую нередко перечёркивают по диагонали, либо вносят другие элементы внутрь овала.

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

Применение в современной типографике

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

  • Среды разработки и редакторы исходного текста программ — благодаря использованию моноширинных шрифтов упрощается выравнивание строк, позволяющее лучше ориентироваться в коде;
  • Интерфейс командной строки и эмуляторы терминала — в них, кроме форматирования вывода, моноширинный шрифт вместе с псевдографикой даёт возможность пользоваться расширенным текстовым интерфейсом пользователя;
  • В технической литературе моноширинным шрифтом выделяют любой компьютерный текст — не только блоки исходного кода, но и ключевые слова языков программирования, вводимую в программу информацию и т.
     д.
  • В биологии моноширинным шрифтом пишут цепочки нуклеотидов и аминокислот;
  • Выполняемые моноширинными шрифтом ASCII-рисунки позволяют менять шрифт на другой моноширинный без особых помех качеству изображения.
  • Моноширинные шрифты используются в автомобильных номерах.

Моноширинные цифры в пропорциональных шрифтах

В типографском наборе числовых данных есть тонкость: в таблицах все цифры должны иметь одинаковую ширину (даже если набор идёт пропорциональным шрифтом), с выравниванием чисел по правому краю.

В компьютерных интерфейсах моноширинными цифрами набирают не только таблицы, но и «скачущие» числовые индикаторы. Поэтому обычно цифры в компьютерных шрифтах делают именно моноширинными. В этом легко убедиться самому — посмотрите в рамку ниже. В Windows 7 на стандартном оформлении Википедии строки из «тонких» единичек и «широких» восьмёрок имеют одну и ту же длину.

  ]111111111[  

  ]888888888[  

Режим пропорциональных цифр включается командами OpenType. [уточнить]

HTML

В разметке HTML существует несколько тегов, которые должны отображать текст моноширинным шрифтом[6]:

Теги HTML для отображения текста моноширинным шрифтом

В CSS моноширинный шрифт в общем виде выбирается с помощью конструкции font-family: monospace (хотя можно также указать название конкретного моноширинного шрифта, например font-family: Lucida Console, monospace или font-family: Courier New, monospace).

Восточноазиатские шрифты

Элементы китайского письма (на котором основаны также корейское и японское письмо), принципиально вписаны в квадраты одинакового размера, поэтому восточноазиатские шрифты являются моноширинными по своей природе.

Часто используются также «двухширинные шрифты»: иероглифы имеют «полную» ширину, а символы ASCII имеют «половинную» ширину (ровно в 2 раза у́же иероглифа). При этом в шрифтах имеются также и полноширинные версии символов ASCII и «узкие» версии некоторых восточноазиатских символов (например, катаканы).

Примеры моноширинных шрифтов

  • Courier и Courier New
  • Lucida Console
  • Terminus
  • Monaco
  • Anonymous Pro

Моноширинные шрифты часто также входят в набор некоторых супергарнитур (несколько гарнитур, выполненных в одном стиле), таких как PT, Liberation, DejaVu и прочих.

Примечания

  1. ↑ Моноширинный шрифт — словарь шрифтов
  2. ↑ Пропорциональный шрифт — словарь шрифтов
  3. ↑ 1 2 Александра Королькова Живая типографика. — Второе издание. — М.: IndexMarket, 2007. — С. 112-113. — 224 с. — ISBN 978-5-9901107-1-7
  4. ↑ Пишущая машина — статья из Большой советской энциклопедии
  5. ↑ 1 2 Фигурнов, Виктор Эвальдович IBM PC для пользователя. — М.: Инфра-М, 1996. — С. 41-52. — 480 с. — ISBN 5-86225-292-4
  6. ↑ htmlbook.ru — Теги HTML — Справочник по HTML
В этой статье не хватает ссылок на источники информации.

Информация должна быть проверяема, иначе она может быть поставлена под сомнение и удалена.
Вы можете отредактировать эту статью, добавив ссылки на авторитетные источники.
Эта отметка установлена 9 июня 2012.

Пропорциональные шрифты (Uniwidth) в дизайне, подборка с 15 лучших шрифтов

Пропорциональные (Uniwidth) шрифты имеют большой потенциал для использования в интерактивных интерфейсах. Это краткая подборка ряда доступных вариантов шрифтов.

Как веб / интерфейс / визуальный дизайнер, я много работаю с состояниями меток

(selected, unselected, active, inactive, available, out of stock). Учитывая, что вы никогда не должны использовать цвет в качестве единственной визуальной подсказки (всегда помните о доступности), я часто прибегаю к помощи веса текста. Однако, если вы когда-либо работали с точно спроектированными интерфейсами, то знаете, насколько неприятно видеть, как ваши кропотливо размещенные метки сдвигаются, когда вы меняете вес текста с обычного на полужирный.

Решение этой проблемы: пропорциональные («uniwidth») шрифты, иногда также называемые «equal-width», «duplexed» или «multiplexed». И нет, я не имею ввиду моноширинные шрифты.

Краткое пояснение: моноширинный шрифт, также называемый непропорциональным – это шрифт, буквы и символы которого занимают одинаковое количество горизонтального пространства (например, A в верхнем регистре такой же ширины, как w в нижнем регистре, или знак €). Моноширинные шрифты традиционно используются на пишущих машинках, а в наши дни – для ввода компьютерного кода.

В моноширинном шрифте, таком как IBM Plex Mono, каждая буква имеет одинаковую ширину

С другой стороны, пропорциональные (Uniwidth) гарнитуры представляют собой гарнитуры с пропорциональным интервалом, но каждый символ занимает одинаковое пространство при разном сокращении или толщине. На практике это означает, что независимо от того, какой вес вы установили для текста, он никогда не изменит его длину или не вызовет перекомпоновку.

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

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

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

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

На данный момент существует не так много ресурсов о пропорциональных гарнитурах. Пока что я нашел два ресурса: список «Equal-width fonts» от Identifont и коллекцию 2015 года «Uniwidth typefaces» от Дэвида Судвикса. Оба ресурса содержат значительное количество различных вариантов.

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

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

Recursive от Arrow Type

www.recursive.design

Recursive – это вариативный шрифт, созданный для «максимальной универсальности, контроля и производительности». Recursive доступен в пропорциональной и моно версии, и обе можно дополнительно контролировать по четырем осям: Weight, Casual, Slant и Cursive. Casual повторяет мягкие и изогнутые мазки кисти и добавляет немного веселья к серьезному шрифту. Recursive поддерживает широкий спектр языков, использующих латинский алфавит, включая вьетнамский. Он также содержит расширенный набор валют, символов, дробей и стрелок.

Recursive можно бесплатно загрузить с Google Fonts или Github, с открытым исходным кодом, под лицензией SIL Open Font License 1.1.

Источник: Arrow Type

PT Root UI от Paratype

www.paratype.com/fonts/pt/pt-root-ui

PT Root UI – это современный, серьезный шрифт без засечек, который бывает четырех типов (Light, Regular, Medium, Bold). PT Root UI специально спроектирован для чтения с экрана, интерфейсов и веб-сайтов. Он имеет широкую языковую поддержку, включая расширенную латиницу и кириллицу (включая азиатскую кириллицу), и содержит табличные цифры, знаки валюты, дроби и индексы, а также ряд стрелок и альтернативных форм.

PT Root UI можно бесплатно загрузить по лицензии SIL Open Font License (OFL) на веб-сайте Paratype.

Источник: Paratype

Golos UI от Paratype

www.paratype.com/fonts/pt/golos-ui

Шрифт Golos UI, также от Paratype, имеет три веса (Regular, Medium, Bold), а также доступен как вариативный шрифт. Golos UI в целом похож на PT Root UI, но имеет немного суженные пропорции. Он обладает широкой языковой поддержкой, включая расширенную латиницу и кириллицу (в том числе азиатскую кириллицу), и содержит табличные цифры, знаки валюты, дроби и индексы, а также ряд стрелок и альтернативных форм.

Golos UI можно бесплатно загрузить по лицензии SIL Open Font License (OFL) на веб-сайте Paratype.

Источник: Paratype

Grandstander от Etcetera Type Company

www.etceteratype.co/grandstander

Grandstander – это игривый вариативный шрифт без засечек, вдохновленный детскими книгами, который «понравится людям всех возрастов». Буквы изогнуты и слегка вздуты, что придает ему комическую эстетику. Grandstander поставляется в статической версии с девятью весами (от Thin до Black) с соответствующим курсивом. Вариативная версия имеет две оси: Weight и Slant. Он поддерживает «широкий спектр языков, использующих латинский алфавит» и включает в себя табличные цифры, а также дроби, альтернативы и лигатуры.

Grandstander можно бесплатно загрузить на условиях OFL (Open Font License) в Google Fonts и Github.

Источник: ETC

Angus от Black Foundry

black-foundry.com/fonts/angus

Angus – это современный шрифт без засечек с закругленными концами, который имеет четко выраженный моноширинный вид. У Angus пять весов (от Light до Extrabold) с соответствующим наклонным курсивом. Angus поддерживает набор латинских шрифтов и включает строчные (минускульные) и табличные цифры, дроби и индексы, лигатуры и стрелки.

Angus можно купить на сайте Black Foundry.

Источник: Black Foundry

Halvar и Halvar Stencil Complete от TypeMates

www.typemates.com/fonts/halvar-and-stencil-complete

Halvar – это массивная система шрифтов, насчитывающая в общей сложности 162 стиля. Halvar и Halvar Stencil имеют три значения ширины (Wide, Normal и Condensed), а также девять весов (от Hairline до Black) с двумя вариантами курсива (Slanted и SuperSlanted). Halvar с громоздкими пропорциями и сложными формами представляет собой прагматичный гротеск. Halvar поддерживает расширенный латинский, греческий и кириллический алфавиты и имеет табличные цифры, надстрочные индексы, дроби, а также альтернативные символы.

Halvar можно приобрести на сайте TypeMate. Также доступен предрелизный вариант вариативного шрифта.

Источник: TypeMates

Service Gothic от HEX

hex.xyz/Service_Gothic

Service Gothic – это незавершенный вариативный шрифт, в настоящее время доступный только в верхнем регистре. Service Gothic включает 6 статических весов от Thin до Bold.

Первую версию Service Gothic можно купить на сайте Future Fonts.

Источник: Future Fonts

Urby и Urby Soft от TypeMates

www. typemates.com/fonts/urby

Urby Collection призван «объединить поразительный характер с технической функциональностью». Urby и его закругленный аналог Urby Soft выпускаются в пяти вариантах веса (от Thin до Black). Их можно использовать как взаимозаменяемые, поскольку они одинаковы по ширине для всех весов в обоих семействах. Urby Collection поставляется с расширенной поддержкой латинского алфавита и включает в себя линейные и табличные цифры, надстрочные и подстрочные индексы, дроби, порядковые числа и широкий спектр полезных декоративных элементов и геометрических фигур.

Urby Collection можно приобрести на сайте TypeMates.

Источник: TypeMates

Geóso от Finaltype

finaltype.de/de/projekte/geoso

Geóso – это гуманистический шрифт без засечек с геометрическим оттенком. Этот шрифт доступен в девяти весах (от Thin до Heavy) с соответствующим курсивом и является универсальным для каждого стиля. Geóso поддерживает расширенный набор латинских шрифтов и имеет обширную и сложную систему цифр, надстрочных, подстрочных и дробных знаков. В качестве бонуса Geóso содержит неуловимую немецкую заглавную букву ß и забавный набор кастомных смайлов.

Geóso можно приобрести на сайте FrontSpring.

Источник: Finaltype

FF Kaytek family от FontFont

www.fontshop.com/superfamilies/ff-kaytek

FF Kaytek – это «свежий взгляд на канцелярские гарнитуры 90-х». Это обширное суперсемейство, состоящее из четырех стилей: Slab, Sans, Headline и Rounded. FF Kaytek Slab и Sans имеют шесть весов (от Thin до Black) плюс соответствующий курсив, в то время, как FF Kaytek Headline и Rounded имеют по семь весов (от Thin до ExtraBlack/Black). Headline and Rounded стили дополняют друг друга и имеют более компактный вид, чем Slab и Sans. FF Kaytek пропорциональный по весу и курсиву в каждом стиле.

Суперсемейство FF Kaytek поддерживает расширенный набор латинских шрифтов и имеет старые цифры, дроби, а также надстрочные и подстрочные индексы.

FF Kaytek доступен в FontShop и MyFonts.

Источник: MyFonts

Bahnschrift от Saja Typeworks

docs.microsoft.com/en-us/typography/font-list/bahnschrift

Bahnschrift – это оцифрованная версия шрифта DIN, известного по немецким дорожным знакам. Bahnschrift был первым вариативным шрифтом Microsoft, имеющим две оси: Weight и Width. Существует статическая версия, которая включает пять весов и три ширины. Bahnschrift поддерживает расширенную латиницу (включая вьетнамский), а также кириллицу и греческий алфавит.

Bahnschrift доступен как часть операционной системы Windows 10.

Источник: Microsoft

FF Scala family от FontFont

scalafont.com

Семейство FF Scala – это классика печати. Спроектированный в 1991 году Мартином Майором, шрифт FF Scala с засечками в старом стиле был позже расширен версией без засечек, FF Scala Sans, основанной на общем скелете. Оба семейства имеют два веса (Regular и Bold) с соответствующим курсивом и двумя сокращенными стилями. Семейство FF Scala поддерживает расширенную латиницу и включает строчные и табличные цифры, надстрочный и подстрочный индекс, дроби, порядковые числа и фирменный набор декоративных стрелок.

Семейство FF Scala доступно для покупки на веб-сайте FontShop.

Источник: FontShop

Помимо обычно очень умеренных шрифтов для основного текста, есть также несколько доступных декоративных пропорциональных шрифтов:

Minérale от 205TF

www.205.tf/look/minerale

Minérale – это вариативный шрифт с необычными основами, грани которых пересекаются. Minérale «довольно сдержанный в своих самых тонких версиях, [но] становится более декоративным в более тяжелых версиях». Статическая версия шрифта имеет пять вариантов веса (от Extralight до Black) и соответствующий курсив. Все они являются пропорциональными (включая версии с курсивом). Minérale поддерживает расширенный набор латинских шрифтов и включает пропорциональные фигурные цифры, пропорциональные строчные цифры, табличные цифры, ординалы, стилистические альтернативы и стрелки.

Minérale можно приобрести на сайте 205TF.

Источник: 205TF

Climate Crisis Font от Helsinki Sanomat

kampanjat.hs.fi/climatefont/index.html

Шрифт Climate Crisis Font – удивительный вариативный шрифт, который пытается пролить свет на изменения климата. Ось веса шрифта основана на данных National Snow and Ice Data Center и прогнозах, предоставленных IPCC. Самый жирный шрифт представляет минимальную протяженность арктического морского льда в 1979 году, а самый легкий представляет собой прогноз на 2050 год.

Шрифт Climate Crisis Font поддерживает основной набор латинских шрифтов и имеет ограниченный набор надстрочных знаков и дробей.

Climate Crisis Font можно бесплатно загрузить в соответствии с лицензией SIL Open Font License (OFL) от Helsigin Sanomat.

Символы шрифта Climate Crisis Font неизменно широкие, но кажется, что они «тают» при выборе более легкого веса. Источник: Helsingin Sanomat

Handjet от Rosetta Type

www. rosettatype.com/Handjet

Handjet – экспериментальный трехкоординатный шрифт на основе сетки. Система шрифтов Handjet содержит 23 элементарных формы (например, квадраты, клевер и сердечки), размер которых можно изменять, создавая различный вес шрифта. Кроме того, можно использовать группы из меньших элементов 2×2 вместо одного элемента. Как и следовало ожидать от Rosetta Type, Handjet поддерживает широкий спектр языков: арабский, армянский, кириллицу, греческий, иврит и расширенную латынь. Он также включает дроби и достаточно забавные маленькие украшения.

Handjet можно купить за 0 евро на веб-сайте Rosetta Type.

Источник: Rosetta Type

Вывод

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

Для дальнейшего чтения по теме

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

Список «Equal-width fonts» от Identifont

http://www.identifont.com/equal-width.html

«Uniwidth typefaces» от Дэвида Судвикса

https://www.fontshop.com/people/david-sudweeks/fontlists/uniwidth-typefaces

В ответ на эту статью Индра Купфершмид собрала коллекцию uniwidth/multiplexed шрифтов от Fontstand. Спасибо!

https://fontstand.com/collections/69697/ab1ddd85e26deaf6647be009be6a1337

Перевод статьи uxdesign.cc

семейств шрифтов — CSS: Каскадные таблицы стилей

Свойство CSS font-family задает приоритетный список из одного или нескольких имен семейств шрифтов и/или общих имен семейств для выбранного элемента.

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

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

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

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

 /* Название семейства шрифтов и общее название семейства */
семейство шрифтов: "Gill Sans Extrabold", без засечек;
семейство шрифтов: "Goudy Bookletter 1911", без засечек;
/* Только родовое имя */
семейство шрифтов: с засечками;
семейство шрифтов: без засечек;
семейство шрифтов: моноширинный;
семейство шрифтов: скоропись;
семейство шрифтов: фэнтези;
семейство шрифтов: системный интерфейс;
семейство шрифтов: ui-serif;
семейство шрифтов: ui-sans-serif;
семейство шрифтов: ui-monospace;
семейство шрифтов: округлый пользовательский интерфейс;
семейство шрифтов: эмодзи;
семейство шрифтов: математика;
семейство шрифтов: fangsong;
/* Глобальные значения */
семейство шрифтов: наследовать;
семейство шрифтов: начальный;
семейство шрифтов: вернуться;
семейство шрифтов: возвратный слой;
семейство шрифтов: не установлено;

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

В приведенном ниже примере перечислены два семейства шрифтов, первое с <название семейства> , а второе с <общее-имя> :

 семейство шрифтов: "Gill Sans Extrabold", sans-serif;

Значения

<фамилия>

Имя семейства шрифтов. Например, «Times» и «Helvetica» — это семейства шрифтов. Имена семейств шрифтов, содержащие пробелы, должны быть заключены в кавычки. Например: «Comic Sans MS».

<общее-имя>

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

с засечками

Глифы имеют завершающие штрихи, расклешенные или сужающиеся концы или настоящие окончания с засечками.

Например: Lucida Bright, Lucida Fax, Palatino, Palatino Linotype, Palladio, URW Palladio, serif.

без засечек

Глифы имеют простые окончания штрихов.

Например: Open Sans, Fira Sans, Lucida Sans, Lucida Sans Unicode, Trebuchet MS, Liberation Sans, Nimbus Sans L, без засечек.

моноширинный

Все глифы имеют одинаковую фиксированную ширину.

Например: Fira Mono, DejaVu Sans Mono, Menlo, Consolas, Liberation Mono, Monaco, Lucida Console, monospace.

курсив

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

Например: Brush Script MT, Brush Script Std, Lucida Calligraphy, Lucida Handwriting, Apple Chancery, курсив.

фантастика
Шрифты

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

Например: Papyrus, Herculanum, Party LET, Curlz MT, Harrington, фэнтези.

системный интерфейс

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

шрифт с засечками

Шрифт с засечками по умолчанию для пользовательского интерфейса.

пользовательский интерфейс без засечек

Шрифт без засечек по умолчанию для пользовательского интерфейса.

моноширинный пользовательский интерфейс

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

округлый

Шрифт пользовательского интерфейса по умолчанию с закругленными чертами.

математика

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

эмодзи

Шрифты, специально разработанные для отображения эмодзи.

песня клыка

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

Действительные имена семейств

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

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

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

 семейство шрифтов: "Goudy Bookletter 1911", без засечек;

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

 семейство шрифтов: Goudy Bookletter 1911, без засечек;
семейство шрифтов: красный/черный, без засечек;
семейство шрифтов: "Lucida" Grande, без засечек;
семейство шрифтов: гм!, без засечек;
семейство шрифтов: test@foo, без засечек;
семейство шрифтов: #POUND, без засечек;
семейство шрифтов: Hawaii 5-0, без засечек;

Следующий пример технически допустим , но не рекомендуется:

 семейство шрифтов: Gill Sans Extrabold, sans-serif;
 
 семейство шрифтов = 
 [ <имя семейства> |  ]#

Некоторые распространенные семейства шрифтов 

 . serif {
  семейство шрифтов: Times, "Times New Roman", Georgia, с засечками;
}
.без засечек {
  семейство шрифтов: Verdana, Arial, Helvetica, без засечек;
}
.monospace {
  семейство шрифтов: "Lucida Console", Courier, моноширинный;
}
.курсив {
  семейство шрифтов: скоропись;
}
.фантазия {
  семейство шрифтов: фэнтези;
}
.эмодзи {
  семейство шрифтов: эмодзи;
}
.math {
  семейство шрифтов: математика;
}
.fangsong {
  семейство шрифтов: fangsong;
}
 
 
Это пример шрифта с засечками.


Это пример шрифта без засечек.


Это пример моноширинного шрифта.


Это пример курсивного шрифта.


Это пример фантастического шрифта.


Это пример математического шрифта.


Это пример шрифта эмодзи.


Это пример шрифта fangsong.
Specification
Unknown specification
# generic-font-families
Unknown specification
# font-family-prop

BCD tables only load in the browser

с включенным JavaScript. Включите JavaScript для просмотра данных.
  • стиль шрифта
  • вес шрифта
  • Основные стили текста и шрифта

Last modified: , by MDN contributors

The Best Free Monospace Fonts for Developers, Compared

Design & UX

    Share

    Whether or не вы знаете имя, вы знаете, что такое моноширинный шрифт. Отличительный текст, который вы ожидаете в таком редакторе, как Visual Studio Code, набран моноширинным шрифтом, и он стал синонимом самого кода. Они отличаются от других шрифтов наличием символов фиксированной ширины, которые занимают одинаковое пространство по горизонтали. Если вы проводите много времени в редакторе кода, вам следует уделить некоторое время выбору лучшего моноширинного шрифта для разработчиков в соответствии с вашими предпочтениями.

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

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

    Потому что, согласитесь, программирование требует большой концентрации!

    Я разделил этот список на три части. Первый лот — довольно популярные опоры. Тогда есть некоторые, которые я считаю недооцененными. А есть и те, которые я считаю переоцененными.

    Попутно я дам вам знать, какой из них мой любимый, какой популярный и какой я выбираю для диковинного любимчика с подстановочными знаками. Но если у вас есть TL;DR и вы не можете дождаться вердикта, вот они:

    • Популярный выбор: Fira Code
    • Выбор редактора: JetBrains Mono
    • Необычный выбор: Monoid (из-за поддержки Font Awesome!)

    Популярные моноширинные шрифты

    Fira Code (популярный выбор)

    • Лигатуры: да
    • Курсив: нет
    • Лицензия: бесплатная (OFL)
    • Разборчивость: высокая / очень высокая
    • Дизайнер/литейщик: несколько дизайнеров

    Несомненно, Fira Code является наиболее часто используемым моноширинным шрифтом из когда-либо существовавших. Разница в том, что Fira Code содержит лигатуры, специфичные для кода ( это когда две графемы/буквы соединяются в один глиф ). Он доступен в Google Fonts, поэтому вы буквально не ошибетесь с этим.

    • Лигатуры: нет
    • Курсив: нет
    • Лицензия: бесплатно (шрифт Ubuntu)
    • Разборчивость: высокая / очень высокая
    • Дизайнер/литейщик: Dalton Maag

    Что отличает Ubuntu Mono от других, так это то, что он предназначен для нескольких (разговорных) языков. Его уникальный стиль также делает его подходящим для использования в дизайне в качестве основного или отображаемого/заголовочного шрифта.
    Если вы ищете очаровательный, но универсальный моноширинный шрифт, Ubuntu Mono, безусловно, стоит потратить минуту вашего времени.

    Иосевка

    • Лигатуры: есть
    • Курсив: да
    • Лицензия: бесплатная (OFL)
    • Разборчивость: высокая / очень высокая
    • Дизайнер/литейщик: Belleve Invis

    Иосевка также поддерживает ряд разговорных языков — 162, если быть точным — и включает в себя девять различных весов, множество лигатур для разных языков кодирования и даже несколько вариантов символов.
    Это очень распространенный моноширинный шрифт (например, Fira Code) и прекрасный выбор, если вам нравятся моноширинные шрифты, которые немного сжаты.

    Моноид (диковинный выбор)

    • Лигатуры: да
    • Курсив: нет
    • Лицензия: бесплатная (MIT/OFL)
    • Разборчивость: высокая / очень высокая
    • Дизайнер/литейщик: Андреас Ларсен
    • Особенности: Поддержка Font Awesome!

    Помимо того, что он полуконденсирован (как Иосевка), острые лигатуры, увеличенные операторы и общий чистый дизайн делают Monoid моим фаворитом. Кроме того, ссылки на классы Font Awesome (например, ) автоматически заменяются настоящей иконкой, что очень, очень здорово.

    Моноид хорошо смотрится с мелким шрифтом и на дисплеях с низким разрешением.

    Хак

    • Лигатуры: нет
    • Курсив: нет
    • Лицензия: бесплатная (MIT)
    • Разборчивость: высокая / очень высокая
    • Разработчик/литейщик: Source Foundry

    Несмотря на то, что это выглядит скучно, в остальном Hack отвечает всем требованиям. При этом Hack имеет открытый исходный код и позиционируется как «Без излишеств. Никаких трюков». Так что по умолчанию ему не хватает стиля.
    Hack включает в себя 1573 глифа, четыре веса и поставляется 129 участниками с открытым исходным кодом (130, если вы включаете себя!).

    Hack отсутствует в Google Fonts, но, что удивительно, они включают URL-адрес для встраивания, что больше, чем предлагают большинство шрифтов, отличных от Google.

    Еще немного…

    • Исходный код Pro
    • Дроид Санс Моно
    • Монако
    • PT Моно
    • Космический моно
    • Кислород Моно
    • Робото Моно

    Недооцененные моноширинные шрифты

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

    JetBrains Mono (по выбору редакции)

    • Лигатуры: да
    • Курсив: нет
    • Лицензия: бесплатная (Apache 2. 0)
    • Разборчивость: высокая / очень высокая
    • Дизайнер/литейщик: Jetbrains

    Возможно, JetBrains Mono не так известен, как другие (в основном Google) шрифты. Он бесплатный, с открытым исходным кодом и предназначен для 145 кодовых языков и содержит 139 лигатур. Внимание к деталям потрясающее, с кристально четким различием между почти идентичными символами (например, o против 0, 1 против l против I и так далее…).

    Рекурсивный

    • Лигатуры: да
    • Курсив: да
    • Лицензия: бесплатная (SIL)
    • Разборчивость: высокая / очень высокая
    • Дизайнер/литейщик: Arrow Type
    • Особенности: переменные стили

    Recursive — это вариативный шрифт, в котором вы решаете, насколько моноширинным он должен выглядеть (среди множества других настроек, таких как Casual , Weight , Slant и Cursive ).

    Он выполнен в виде одного мазка в стиле кисти, но, опять же, вы сами решаете, насколько смелой должна быть эта эстетика, если вы готовы потратить немного времени на ее настройку в соответствии со своими потребностями. Подумайте о том, чтобы попробовать вариант «Rec Mono SemiCasual»!

    iA Writer Mono

    • Лигатуры: нет
    • Курсив: нет
    • Лицензия: бесплатная (SIL)
    • Разборчивость: высокая / очень высокая
    • Дизайнер/литейщик: iA Inc.
    • Особенности: переменные стили

    Я прямо сейчас пишу эту самую статью с помощью iA Writer. iA Writer Mono — это моноширинный шрифт по умолчанию, который поставляется с приложением, но этот шрифт доступен всем из их учетной записи GitHub. По крайней мере, это выглядит красиво с Markdown.

    Еще немного…

    • Мононоки
    • Крафт Моно
    • Курьер Std
    • Андале Моно
    • Лига Моно
    • Монодиск

    Переоцененные моноширинные шрифты

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

    • Лигатуры: нет
    • Курсив: нет
    • Лицензия: бесплатно (для Windows)
    • Разборчивость: высокая / очень высокая
    • Дизайнер/литейщик: Microsoft Corp.

    По умолчанию Consolas поставляется с Windows (версии Vista и выше). Это в основном шрифты Microsoft Edge для Windows. Популярный, но, скорее всего(?), потому что он уже установлен.

    Inconsolata

    • Лигатуры: нет
    • Курсив: нет
    • Лицензия: бесплатная (OFL)
    • Разборчивость: высокая / очень высокая
    • Дизайнер/литейщик: Раф Левиен
    • Особенности: переменные стили

    Если вам нужно что-то получше, чем Consolas или версия Consolas для macOS или любой другой операционной системы, попробуйте Inconsolata (которая в любом случае вдохновлена ​​Consolas).

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

    Ввод Mono

    • Лигатуры: нет
    • Курсив: нет
    • Лицензия: бесплатная ( для частного использования )
    • Разборчивость: высокая / очень высокая
    • Дизайнер/литейщик: DJR

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

    Еще немного…

    • Anonymous Pro
    • Освобождение Моно
    • Фантастический Сан Моно
    • Отшельник

    A Font Farewell

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

    Поделиться этой статьей

    Даниэль Шварц

    Дизайнер, писатель, наставник. Основатель UX Tricks.

      шрифты

      Фиксированный моноширинный размер – Архивные мысли Эрика

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

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

      span {семейство шрифтов: моноширинный;}


      Это буква "p" с 'span' внутри.

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

      Самые сообразительные из вас скажут: «Это зависит от обстоятельств, но, скорее всего, 13px ». Это потому, что здесь размер моноширинного текста контролируется настройками браузера. Подавляющее большинство пользователей, конечно, никогда не трогали настройки по умолчанию «16» для пропорциональных шрифтов и «13» для моноширинных/фиксированных шрифтов. Тогда для них ответ 13px . Точно так же, если бы я спросил о вычисленном элементе p font-size , ответ был бы: «Это зависит, но, скорее всего, 16px ».

      Итак, давайте добавим еще немного и посмотрим, где мы приземлимся.

      span {семейство шрифтов: моноширинный; размер шрифта: 1em;}


      Это буква "p" с 'span' внутри.

      Как и прежде: имея в виду, что других авторских стилей нет, каким должен быть вычисляемый размер шрифта элемента span ?

      В этом случае, основываясь на предыдущем вопросе и ответе, вы можете сказать: «Это зависит, но, скорее всего, 16px ». Рассуждения здесь довольно просты: поскольку вычисленный размер шрифта элемента p равен 16px , размер шрифта : 1em; , назначенный диапазону , приведет к тому, что он будет иметь тот же размер.

      И это правда… в двух из пяти браузеров, которые я тестировал: Opera 10 и Internet Explorer 8.0004 размер шрифта из диапазона равен 13px , как и в нашем первом примере. Этот результат остается верным, если правило изменено на использование шрифта : 1em моноширинный; вместо двух отдельных свойств. Это поведение сохраняется даже при добавлении в правило определенных семейств шрифтов, таких как Courier New, Courier, Andale Mono и т. д. Это также сохраняется, если 1em преобразуется в 100% .

      Другими словами, даже несмотря на то, что я написал CSS, который прямо говорит: «Сделайте размер шрифта у этого элемента такой же, как у его родителя», три из пяти браузеров меня явно игнорируют.

      Я говорю «очевидно», потому что эти браузеры позволяют span наследовать размер шрифта по умолчанию от своего родителя (и, таким образом, косвенно, всех его предков), но размер шрифта по умолчанию равен средний . Если вы посмотрите medium , вы обнаружите, что у него нет определенного числового размера. Так что эти браузеры приравнивают средний с настройками предпочтения, что означает, что для моноширинных шрифтов он отличается от всего остального.

      Другими словами, эти три браузера делают что-то вроде этого:

      1. Этот диапазон должен иметь тот же размер шрифта , что и его родительский элемент.
      2. Родительский размер шрифта равен medium , хотя когда мой веб-инспектор (или авторский DOM-скрипт) спрашивает, я сообщаю 16px Я использовал для вывода текста. Таким образом, span s font-size на самом деле medium .
      3. Этот средний размер span использует моноширинный шрифт. Настройка предпочтения для моноширинного изображения — «13», и я приравниваю средний к настройке предпочтения, поэтому я выведу диапазон , используя 13-пиксельный текст.

      Opera 10, как я уже сказал, не делает этого, , даже если в настройках предпочтения моноширинного шрифта установлено значение по умолчанию «13» или действительно отличается от предпочтения немоноширинных шрифтов. И IE8, по-видимому, тоже этого не делает, хотя вы не можете установить числовые предпочтения размера шрифта в IE8, поэтому то, что он на самом деле делает, остается открытым для интерпретации. О, IE8, ты, непостижимый маленький пройдоха.

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

      span {семейство шрифтов: моноширинный; размер шрифта: 2em;}


      Это буква "p" с 'span' внутри.

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

      Ответ: «Зависит, но скорее всего 26px , пока мы не говорим об Opera 10 или IE8. Если это один из этих двух, то скорее всего 32px ». Почему? Поскольку браузеры, изменяющие размер, видят размер шрифта : 2em; Объявление как «дважды средний » и дважды 13 равно 26. Opera 10 и IE8, как было установлено ранее, не изменяют размер. Или же они просто интерпретируют средний как равный настройке предпочтения пропорционального размера шрифта. Что бы ни.

      Хорошо. Все это означает, что во многих браузерах вы можете объявить, что размер шрифта элемента должен быть в два раза больше размера его родительского элемента, и на самом деле он должен быть в 1,625 раза больше — или, если вы хотите посмотреть на это с другой стороны, 0,8125. раза больше, чем вы ожидали. 0,8125 происходит от 26/32, что, конечно же, сокращается до 13/16. Если бы вы настроили настройки своего браузера так, чтобы моноширинный параметр был равен «15», то моноширинные шрифты были бы 0,9.375 (15/16) раз больше ожидаемого размера.

      Но –  и вот где все становится действительно забавным –  это не всегда так. Видите ли, вы, возможно, не столкнулись с этой проблемой, если объявляли определенные семейства шрифтов без общего запасного варианта. Рассмотрим этот вариант (обратите внимание, что я вернулся к 1em для размера шрифта ):

      span {семейство шрифтов: «Новый курьер»; размер шрифта: 1em;}


      Это буква "p" с 'span' внутри.

      На этот раз в каждом из пяти браузеров, о которых я упоминал ранее, при условии, что браузер настроен по умолчанию, вычисленный (и отрисованный) font-size из span будет равен 16px . Не 13px . И единственная разница в том, что мы перешли от общего семейства шрифтов к конкретному.

      «Вуаля!» ты кричишь. «Мы просто добавим родовое семейство в конец и будем прямо как дождь!» К сожалению нет. Ибо если вы сделаете это:

      span {семейство шрифтов: "Courier New", моноширинный; размер шрифта: 1em;}


      Это буква "p" с 'span' внутри.

      …тогда ответ на вопрос, который я постоянно задаю, будет таким: «Это зависит от обстоятельств, но с учетом настроек браузера по умолчанию это будет 16px , если только мы не говорим о Safari. В этом случае это 13px ».

      Действительно. Единственный из протестированных мной браузеров, Safari возвращается к изменению размера, когда вы предоставляете общий запасной вариант для своего конкретного семейства. Или даже несколько семей. Сделайте все возможное, чтобы убедиться, что пользователь, по крайней мере, получит шрифт фиксированной ширины, а вы получите размер меньше, чем предполагалось. (Вы можете получить предысторию этого в конце 2006 года в блоге Surfin’ Safari.)

      Так что же нам делать? Проявите творческий подход. Это то, что сделали ребята из ARIA в таблице стилей своей спецификации, где они объявили два стека шрифтов: первый с общим запасным вариантом, а второй без него. Это работает, но некрасиво. Мне это совсем не понравилось. И затем, на полпути к написанию этого поста, исправление пришло ко мне как выстрел в темноте. Проверь это:

      span {семейство шрифтов: «Courier New», моноширинный, с засечками; размер шрифта: 1em;}


      Это буква "p" с 'span' внутри.

      На этот раз ответ таков: «Это зависит от того, но, учитывая настройки браузера по умолчанию, 16px ».

      Действительно! Даже в Сафари! И во всех протестированных браузерах он возвращается к общему моноширинному шрифту требуемого размера, даже если конкретное семейство (или семейства), которое мы объявляем, недоступно! Это можно проверить, изменив конкретное семейство шрифтов на то, чего на самом деле не существует:

      span {семейство шрифтов: "Corier Neu", моноширинный, с засечками; размер шрифта: 1em;}


      Это буква "p" с 'span' внутри.

      Моноширинное совершенство в предполагаемом родительском размере. Достаточно заставить тело поверить в монотеизм.

      Поскольку я обычно предполагаю, что все, что я изобретаю, уже было изобретено кем-то другим, я погуглил, чтобы узнать об уровне техники. И разве вы не знали, что люди из Википедии проработали это где-то в конце прошлого года. Это, конечно, подтверждает мое утверждение о том, что Википедия — это новый Стив Аллен. Я также нашел несколько утверждений о том, что стек шрифтов заканчивается цифрой 9.0004 моноширинный, моноширинный будет иметь тот же эффект, но это не подтвердилось в моем тестировании. Возможно, это работало в старых версиях браузеров, но больше не работает.

      Я упустил еще один способ заставить моноширинные шрифты вести себя так, как ожидалось, который вы, возможно, уже поняли из предыдущего: объявить размер шрифта для любого родителя моноширинного элемента значением длины, по строкам тело {размер шрифта: 12px;} . Это передаст значение длины вниз по дереву документа моноширинному элементу через наследование, которое будет использовать его без изменения его размера в каждом тестируемом браузере. Хотя вы, возможно, слышали, что масштабирование страницы делает текст размером с пиксель приемлемым, я не очень в этом убежден. Еще нет. Слишком много людей не знают, как масштабировать, и слишком много браузеров недостаточно продвинуты для масштабирования страниц. Даже в браузерах с масштабированием страницы возникают проблемы с пиксельным текстом. Так что я все еще на подножке ems и процентов.

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

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *