Как сделать обводку шрифта в css

Субпиксельный рендеринг и обводки

Субпиксельный рендеринг и обводки

От автора: я был невероятно счастлив, что смог недавно выступить на первом Talk.CSS в Мельбурне, и после этого у меня был хороший разговор с одним из участников о проблемах субпиксельного рендеринга для тонких обводок CSS в разных браузерах.

Во время своего выступления я очень кратко затронул тему субпиксельного рендеринга при освещении свертывания полей. Если у вас есть полностью пустой блок, его поля вдоль направления блока будут объединяться друг с другом.

Вычисленные значения отступов

Однако добавление чего-либо в пустой блок, даже обводки или отступов, предотвратит это. В тот момент мне было любопытно, насколько низким может быть значение отступа, прежде чем браузер воспримет его как ничто, и я обнаружил, что для Firefox вы можете опуститься до 0.0083333323709666669px, но 0.0083333323709666668px еще воспринимается.

В Chrome, однако, я остановился на 0.015624999534338711824899004199096452794037759304047px. Не стесняйтесь, если хотите, дайте мне знать, как далеко вы можете зайти. Safari имел те же десятичные значения, поэтому я предполагаю, что и в Blink это не изменится.

После дальнейшей проверки DevTools для 3 браузеров, которые были у меня на ноутбуке (кто знает, работают ли браузеры в Windows по-другому?), я заметил интересные вещи относительно того, как DevTools выражает вычисленные значения.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

Попытка Firefox DevTools отобразить малые десятичные дроби

Субпиксельный рендеринг и обводки

Что касается Chrome и Safari, кажется, что диаграмма блочной модели не согласуется с тем, что мы видим в браузере, и что-то происходит с отображаемыми вычисленными значениями.

Блочная модель в Chrome выглядит запутанной

Субпиксельный рендеринг и обводки

Похоже, что вычисленные значения в Safari имеют некоторое округление

Субпиксельный рендеринг и обводки

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

О числах с плавающей запятой

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

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

О рендеринге обводки

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

Решением этой проблемы является использовать значение thin для свойства border-width.

Обводки были введены с CSS1 как часть блочной модели. Основные свойства, которые определяют, как выглядит обводка border-width, border-style и border-color. Все 3 свойства являются частью сокращенного свойства, используемого для установки свойств обводки для всех 4 сторон блока.

Для border-width, вы можете использовать значения ключевых слов, такие как thin, medium или thick, а также стандартные значения длины CSS. Суть этих значений ключевых слов в том, что спецификация не определяет, как именно браузеры должны их разрешать.

Длина, соответствующая значениям thin, medium и thick, не указана, но значения постоянны по всему документу и thin ≤ medium ≤ thick. А UA может, например, сделать толщину зависимой от среднего размера шрифта: один вариант может быть 1, 3 и 5px, если средний размер шрифта составляет 17px или меньше. Отрицательные значения <length> не допускаются.

Я не тестировал каждый браузер, только Chrome, Firefox и Safari, но все три из них действительно используют предложенные 1px, 3px и 5px соответственно.

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

Заключение

Субпиксельное округление влияет на многие аспекты рендеринга в браузере, и было интересно почитать наблюдения Джона Резига о его тестовом примере, включающем размер дочернего элемента div в процентах.

Другая проблема с субпиксельным округлением была задокументирована инженерами в Symbiote, которые столкнулись со сложностями округления вычисленной высоты текста при использовании значений em или rem для свойства line-height.
Это похоже на давнюю проблему с рендерингом браузера, но, похоже, четкого решения нет. Если у кого-то есть понимание состояния субпиксельного рендеринга или если кто-то укажет мне нужных людей, я был бы очень признателен.

Как сделать красивый шрифт и обводку текста

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

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

Итак, начнём с создания шрифта.

Для создания оригинального шрифта используем сервис typetester.org

Заходим по ссылке.

У сервиса две версии &#8212; англоязычная и русскоязычная, но кнопки переключения нет, а по умолчанию открывается англоязычный вариант, поэтому используем переводчик и создаём аккаунт.

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

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

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

Для начала выберем вариант из имеющихся.

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

Можно его крутить-вертеть, менять цвет и размер, сжимать-растягивать, и ещё много чего.

Очень интересная функция &#8212; это создание новых слоёв.

С её помощью можно одну букву, слово, или словосочетание сделать в одном стиле, а следующую уже в другом.

Короче полёт фантазии для творчества.

Можно так-же создать свой проект. В интерфейсе все опции доступно показаны в боковых панелях.

После создания проекта переходим в Экcпорт HTML+CSS и получаем коды, для вставки шрифта на сайт.

Линк вставляется в head сайта, туда где все линки, CSS &#8212; в файл стилей, а HTNL &#8212; на страницу, туда где надо отобразить созданный шрифт.

И ещё один нюанс &#8212; текст в HTML, тот который вы использовали при создании шрифта, можно будет редактировать прямо в коде, в зависимости от потребности.

Единственно, что в этом сервисе пока не доработано &#8212; это то, что работает он только с библиотекой Google Fonts.

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

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

  • Roboto
  • IBM Plex Serif
  • Open Sans
  • Montserrat
  • IBM Plex Mono
  • Roboto Condensed
  • Oswald
  • Source Sans Pro
  • IBM Plex Sans
  • PT Sans
  • Roboto Slab
  • Merriweather
  • Open Sans Condensed
  • Ubuntu
  • Noto Sans
  • Playfair Display
  • Lora
  • PT Serif
  • Arimo
  • Roboto Mono
  • PT Sans Narrow
  • Noto Serif
  • Fira Sans
  • Lobster
  • Yanone Kaffeesatz
  • Exo 2
  • Rubik
  • Pacifico
  • Cormorant Garamond
  • Ubuntu Condensed
  • Amatic SC
  • Play
  • EB Garamond
  • PT Sans Caption
  • Comfortaa
  • Cuprum
  • Vollkorn
  • Poiret One
  • Alegreya Sans
  • Alegreya
  • Old Standard TT
  • Philosopher
  • Russo One
  • Istok Web
  • Tinos
  • Didact Gothic
  • Fira Sans Condensed
  • Jura
  • Playfair Display SC
  • Caveat
  • Marck Script
  • Fira Sans Extra Condensed
  • Prosto One
  • Forum
  • Arsenal
  • PT Mono
  • Neucha
  • Scada
  • Alice
  • Prata
  • Bad Script
  • Alegreya Sans SC
  • Montserrat Alternates
  • Ubuntu Mono
  • Press Start 2P
  • PT Serif Caption
  • Marmelad
  • Cousine
  • Oranienbaum
  • Cormorant
  • Anonymous Pro
  • Alegreya SC
  • El Messiri
  • Kurale
  • Tenor Sans
  • Kelly Slab
  • Spectral SC
  • Andika
  • Spectral
  • Yeseva One
  • Fira Mono
  • Gabriela
  • Vollkorn SC
  • Rubik Mono One
  • Pangolin
  • Podkova
  • Pattaya
  • Ledger
  • Cormorant Infant
  • Ruslan Display
  • Cormorant SC
  • Underdog
  • Seymour One
  • Stalinist One
  • Cormorant Unicase

Есть в этом списке и оригинальные и рукописные шрифты, но должен признать, таковых не много.

На этом по сервису всё.

Как сделать обводку текста.

Обводка текста без фотошопа, делается свойством CSS &#8212; text-shadow которое создаёт тени.

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

Это так сказать каркас, а вот ширина цвет и вид обводки подбирается индивидуально путём изменений значений в text-shadow.

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

Если кто не в курсе, как это сделать, то инструкция по теням в статье Как делается тень

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

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