Жирный текст

Жирный текст

Больше обычного

Меньше обычного

Курсив

Курсив

С подчеркиванием

Зачеркнутый

Возможности атрибута style

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

1) font-family – свойство устанавливает семейство шрифта. Возможно перечисление нескольких значений.
Изменение шрифта в html на следующее значение произойдет, если предыдущее семейство не установлено в операционной системе пользователя .

Синтаксис написания:

font-family: имя шрифта [, имя шрифта[, ...]]

2) font-size – задается размер от 1 до 7. Это один из основных способов того, как в html можно увеличить шрифт.
Синтаксис написания:

font-size: абсолютный размер | относительный размер | значение | проценты | inherit

Размер шрифта можно также задать:

• В пикселях;
• В абсолютном значении (xx-small, x-small, small, medium, large );
• В процентах;
• В пунктах (pt ).

Font-size:7

Font-size:24px

Font-size: x-large

Font-size: 200%

Font-size:24pt

font-style: normal | italic | oblique | inherit

Значения:

• normal –нормальное написание;
• italic – курсив;
• oblique – шрифт с наклоном вправо;
• inherit – наследует написание родительского элемента.

Пример того, как поменять шрифт в html с помощью этого свойства:

font-style:inherit

font-style:italic

font-style:normal

font-style:oblique

font-variant: normal | small-caps | inherit

Пример того, как изменить шрифт в html этим свойством:

font-variant:inherit

font-variant:normal

font-variant:small-caps

font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900

Значения:

• bold – устанавливает полужирный шрифт html;
• bolder – жирнее относительно normal;
• lighter –менее насыщенное относительно normal;
• normal – нормальное написание;
• 100-900 – задается толщина шрифта в числовом эквиваленте.

font-weight:bold

font-weight:bolder

font-weight:lighter

font-weight:normal

font-weight:900

font-weight:100

Свойство font и цвет шрифта html

Font является еще одним контейнерным свойством. Внутри себя оно объединило значения нескольких свойств, предназначенных для изменения шрифтов. Синтаксис font :

font: font-size font-family | inherit

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

• caption – для кнопок;
• icon – для иконок;
• menu – меню;
• message-box –для диалоговых окон;
• small-caption – для небольших элементов управления;
• status-bar – шрифт строки состояния.

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

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

Подключение веб-шрифтов с помощью @font-face:

• подключение нестандартного шрифта с помощью директивы

Директива

Существует несколько форматов веб-шрифтов. Наиболее распространенные из них: EOT, WOFF, OTF или TTF,

Формат EOT , который понимают браузеры IE вплоть до версии 8. Собственно, этот формат шрифта создан и существует только ради этого браузера и таких его версий. Чтобы получить шрифт формата EOT, необходимо специальное программное обеспечение для преобразования формата TTF в OET.

Формат WOFF (Web Open Font Format) является наилучшим на сегодняшний день для использования в Веб: самый маленький и легкий, поддерживается всеми современными браузерами (в том числе IE9 и выше); этот формат был создан специально для Веб. Фактически - это облегченная версия формата TTF или OTF.

Форматы OTF (Open Type Font) и TTF (True Type Font) - это самые обычные компьютерные шрифты, которые используются в большинстве операционных систем (Windows, Macintosh, Linux) и в приложениях под эти системы. Но, помимо этого, такие шрифты можно легко использовать и в Интернете.

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

Благодаря этому изображения в таком формате масштабируются без потери качества - при увеличении размера картинки компьютеру достаточно пересчитать векторные точки. Особенность этого формата графики позволила применить его для создания “шрифтов”. То есть, обычный шрифт преобразуется в формат SVG, где каждый шрифт - это фактически картинка в масштабируемом формате SVG.

Зачем потребовались такие трудности? Все дело в том, что браузеры под ОС Android (очень распространенная ОС под мобильные устройства) могут отображать веб-шрифты только в этом формате. Браузеры под iPhone (Safari 4.1 и ниже) также не умеют распознавать веб-шрифт. Вот этим “неумехам” и подсовывают картинки в виде шрифтов - “не умеешь кушать обычную пищу, так кушай хотя бы это!”.

Правовой вопрос использования шрифтов

Вопрос можно кратко cформулировать в следующих двух предложениях. Все шрифты делятся на платные или бесплатные .

Платные шрифты делятся на те, которые:

• можно использовать в Веб
• нельзя использовать в Веб

Чтобы не заморачиваться решением запутанного вопроса лицензии на шрифты, можно воспользоваться веб-службами Google Fonts или TypeKit , на которых собраны все шрифты, которые можно использовать в Веб . Шрифты на этих серверах либо бесплатные (Google Fonts), либо платные (TypeKit).

Краткий список источников бесплатных шрифтов , которые можно использовать в Веб:

https://www.theleagueofmoveabletype.com/)
• FontSquirrel (http://www.fontsquirrel.com/)
• Google Fonts (https://www.google.com/fonts)
• The Open Font Library (http://openfontlibrary.org/ru)
• Fontex.org (http://fontex.org/)
• Exljbris Font Foundry (http://www.exljbris.com/)

Большинство веб-сервисов, которое предоставляет шрифты для Веб, “отдают” их в формате OTF или TTF. Поэтому нужно конвертировать этот шрифт в четыре формата, описанных выше, для того, чтобы максимальное число посетителей сайта смогло увидеть на своих устройствах содержимое данного сайта. Для конвертирования не нужно искать специальное программное обеспечение. Можно воспользоваться бесплатным генератором @font-face Generator , находящемся на сервере FontSquirrel (http://www.fontsquirrel.com/).

Единственное ограничение этого сервиса - он имеет свой собственный blacklist, в который помещены шрифты, запрещенные по лицензии для использования в Веб. Другими словам, если “подсунуть” этому генератору лицензионный шрифт, приобретенный пиратским способом, то он откажется от генерации последнего.

Генератор

• EOT - формат только для Internet Explorer 8 и ниже
• WOFF - самый современный и маленький по размеру шрифт, который понимают большинство современных браузеров
• TTF - сравнительно большой по размеру шрифт и достаточно устаревший
• SVG - самый большой по размеру и объему шрифт, поэтому его необходимо размещать в самой последней строке. К тому же, этот формат шрифта используется только в браузерах ОС Android или в браузере Safari 4 (то есть, iPhone )

Браузер читает тело директивы

Правильное применение подключенного web-шрифта League Gothic. Здесь указывается на первом месте имя подключенного шрифта, а затем - резервные шрифты, которые заведомо установлены в системе пользователя (имя шрифта, гарантировано имеющегося в системе и семейство шрифтов).

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

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

Виды шрифтов

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

На самом деле это не так. Или не совсем так. Браузер действительно отрисовывает шрифт указанным ему способом, но вот с самим шрифтом он ничего сделать не может. Он просто берет указанное тегом начертание шрифта и выводит его на экран. Дело в том, что дизайнеры или компании, занимающиеся разработкой шрифтов, создают шрифты таким образом: художник рисует четыре набора одного и того же шрифта. То есть, рисуется набор символов в обычном начертании (regular), затем рисуется набор символов в курсивном начертании (italic), потом набор символов в полужирном начертании (bold), и наконец набор символов в полужирном курсивном начертании (bold italic). Все эти четыре набора символов фактически являются отдельными шрифтами, хотя и носят одно общее название (Georgia, Tahoma, Helvetica и так далее).

Когда браузеру указывается, какое начертание применить, он просто берет шрифт с указанным начертанием и отображает его. К примеру, шрифт Arial имеет четыре вида начертания. Если указывается, что нужно полужирное начертание, то браузер берет полужирное начертание Arial. Сам браузер преобразовать одно начертание в другое не может ни в коей мере. Он может выполнить только одну вещь - попытаться сделать и обычного начертания “курсивное”. Команда, говорящая браузеру выполнить такую задачу, имеет название

Простой способ подключения веб-шрифта

Простой способ заключает в добавлении к директиве

Расскажу, как я понимаю данные CSS-правила. Директива

• - загрузить шрифт указанной жирности;
• производилось каждый раз отдельным вызовом функции к выбранным элементам страницы: p { font-family : PTSans ; }

  И затем HTML-тегами

  указать, какое начертание шрифта применить к указанным элементам: dolor ets < strong > lorem ipsum dolor ets lorem ipsum ipsum dolor ets lorem ipsum < em > dolor ets lorem ipsum dolor ets lorem ipsum dolor ets

  Браузер “вытащит” из массива PTSans шрифт нужного начертания (bold или italic или bold italic) и применит его к указанным элементам страницы.

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

  и .

  В тех местах, где применены теги

  , браузер IE8 будет сам делать из шрифта PTSans начертания . Пример варианта подключения веб-шрифта, понятного для IE8, показан ниже: @font-face { font-family : "PTSansRegular" ; src : url("PTSansRegular.eot") ; src : url("PTSansRegular.eot#iefix") format ("embedded-opentype" ), url("PTSansRegular.woff") format ("woff" ), url("PTSansRegular.ttf") format ("truetype" ), url("PTSansRegular.svg") format ("svg" ); } @font-face { font-family : "PTSansItalic" ; src : url("PTSansItalic.eot") ; src : url("PTSansItalic.eot#iefix") format ("embedded-opentype" ), url("PTSansItalic.woff") format ("woff" ), url("PTSansItalic.ttf") format ("truetype" ), url("PTSansItalic.svg") format ("svg" ); } @font-face { font-family : "PTSansBold" ; src : url("PTSansBold.eot") ; src : url("PTSansBold.eot#iefix") format ("embedded-opentype" ), url("PTSansBold.woff") format ("woff" ), url("PTSansBold.ttf") format ("truetype" ), url("PTSansBold.svg") format ("svg" ); } @font-face { font-family : "PTSansBoldItalic" ; src : url("PTSansBoldItalic.eot") ; src : url("PTSansBoldItalic.eot#iefix") format ("embedded-opentype" ), url("PTSansBoldItalic.woof") format ("woff" ), url("PTSansBoldItalic.ttf") format ("truetype" ), url("PTSansBoldItalic.svg") format ("svg" ); }

  Обратите внимание на отсутствие правил

  и , ? Насколько же “раздуются” таблицы стилей в этом случае! А если вдруг (не дай Бог!) придется вносить изменения в такой код? p { font-family : PTSansRegular ; font-weight : normal ; font-italic : normal ; font-size : 36px ; } p strong { font-family : PTSansBold ; font-weight : bold ; font-italic : normal ; } p em { font-family : PTSansItalic ; font-weight : normal ; font-italic : italic ; } p strong em { font-family : PTSansBoldItalic ; font-weight : bold ; font-italic : italic ; }

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

  Шрифты Google Fonts

  Чтобы не заморачиваться с поиском шрифта, скачиванием его в формате TTF или OTF, конвертации на генераторе типа FontSquirrel Generator, подключения полученных CSS-стилей в проект с помощью многочисленных директив

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

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

  В Google плотность шрифта обозначается не с помощью ключевых слов

  , а в числовой шкале - 100 до 900. Значение 400 соответствует шрифт Gentium Book Basic нормальной плотности курсивного начертания: em { font-family : "Gentium Book Basic" , serif ; font-weight : 400 ; font-style : italic ; }

  На этом выжимка по веб-шрифтам заканчивается.

Давненько ничего не писал, ну да ладно.
В данный момент занимаюсь web разработкой и встал вопрос о красивом меню. С анимацией, но без JS или Flash. Конечно, всё это делается силами CSS3, и в придачу не будем использовать картинки. Совсем.

Запускаем, видим окно

Открываем "Текст > Редактор шрифтов SVG...", появится справа панелька

Нажимаем на font 1, меняем на имя своего шрифта, например MySomeFont, правее поле *Гарнитура* очищаем.

Теперь открываем вкладочку *Глифы* всё на нашей панельке *Редактор шрифтов SVG*. Как мы видим, для нас уже добавили глифы английской раскладки. Можете все удалить, если мешаются, правой кнопкой мыши на них кликая. Так же можно редактирова имя глифа ну и символ, который он отождествляет

Займёмся добавкой самих картинок.

Импортируем "Файл > Импортировать..." (Ctrl+I) изображение, которое мы хотим включить в шрифт. Если это растровая грифика, после добавления нужно выполнить "Контур > Векторизовать растр" (Alt + Shift + B). Лично я в опциях не ковырялся, просто жмякаем на *OK* и создаётся уже векторное изображение.

Растровое удаляем (Выделяем и нажимаем клавишу Delete) - внизу в строке при выделении объекта пишется, какой он - растровый (Изображение) или векторный (Контур).

Далее растягиваем контур на рабочую область (в верхней панельке есть области ввода - x: 0, y: 0; Ш: 1000 и В: 1000). Оставляю контур выделенным, следуем в нашу любимую панельку *Редактор шрифтов SVG* во вкладочку *Глифы*. Теперь выделяем тот глиф, который мы хотим связать с нашим контуром. Пускай это будет глиф с символом *a*. Затем просто щёлкаем на кнопку *Получить кривые из выделения*. Чтобы проверить, всё ли мы правильно сделали, просто вводим добавленый символ в нижерасположенное поле *Текст* и должно отобразиться наше изображение. После проверки контур можно сдвинуть за рабочую область или удалить, он больше не нужен.

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

В общем добавили мы все контуры к нашим символам. Теперь надо подредактировать сам XML файл немножко. Открываем *Редактор XML* (Shift+Ctrl+X) - кнопочка есть на главной панели - четвёртая справа. И нам нужно изменить атрибут *id* у пункта *

@font-face {
font-family: "MySomeFont";
src: url("fonts/font.svg") format("svg");
}

Ну в общем в общем и всё.

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

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

1. Montserrat

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

2. Abril Fatface

Abril Fatface является частью большого семейства шрифтов, которая представлена 18 стилями, созданными для различных целей. Этот шрифт отличается сильным, элегантным присутствием, что делает его прекрасным решением для создания бросающихся в глаза заголовков. Чаще всего его комбинируют с Lato, Open Sans и Droid Sans.

3. Playfair Display

Учитывая значительную x-высоту и небольшие подстрочные элементы литер, Playfair Display также подходит для написания заголовка, особенно если место для него ограничено. Он хорошо сочетается с Georgia и часто используется с Oswald, Lato и Arvo.

4. GT Walsheim

Используемый сегодня во многих блогах, GT Walsheim является представителем геометрических гротесков и входит в семейство Grilli Type. За полный набор шрифтов нужно платить, но Grilli Type предлагает бесплатную пробную версию GT Walsheim.

5. Merriweather

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

6. Josefin Sans

Josefin Sans создавался согласно канонам винтажного шведского дизайна и отличается элегантной геометрической эстетикой.

7. Gravitas One

Gravitas One создан на основе “UK fat face” – жирного рекламного шрифта, появившегося во время индустриальной революции в Англии. Этот шрифт прекрасно выглядит в среднем и большом масштабе и подходит для заголовков, названий и вкладок.

8. Jura

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

9. League Gothic

Изначально спроектированный Морисом Бентоном (Morris Fuller Benton) для American Type Founders Company в 1903 году, League Gothic нашел себе новое применение после апдейта и добавления новых глифов.

10. Fjord

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

11. Amaranth

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

12. Poly

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

13. Gentium Basic

Этот шрифт создавался как мульти-лингвистический, включающий в себя латинские и греческие литеры, а также кириллицу и продвинутую поддержку в версии Gentium Plus. Gentium Basic и Gentium Book Basic доступны в бесплатной веб-версии, но ограничены только латинским алфавитом.

14. Open Sans

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

15. Ledger Regular

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

16. Signika

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

17. Josefin Slab

Созданный согласно канонам геометрического шрифта, характерного для 30-х годов прошлого века, с добавлением скандинавских черт, шрифт Josefin Slab обладает характеристиками брускового шрифта и напоминает шрифт печатной машинки. Интересно, что его х-высота составляет половину от высоты прописной буквы.

18. Forum

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

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

20. Arvo

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

21. Bevan

Bevan был создан на основе традиционного брускового шрифта 30-х. Буквы были отцифрованы, им придали новую форму и оптимизировали для веб-версии. Это один из немногих сверхжирных шрифтов, которые подходят для сайтов.

22. Old Standard TT

Old Standard TT был создан на основе шрифта с засечками Modern, который был популярен в конце 19-начале 20 веков, а затем забыт на долгое время. Этот шрифт подходит для придания стиля особому виду контента, например, научным исследованиям или текстам на греческом или кириллице.

23. Kreon

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

24. Droid Sans

Droid Sans был оптимизирован для максимальной читабельности даже в небольших интерфейсах – например, меню на экранах мобильных телефонов. Это нейтральный ненаклонный шрифт с простыми открытыми очертаниями литер.

25. Italiana

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

26. Vollkorn

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

27. Actor

Этот шрифт отличается особенно большой x-высотой, что требует достаточно много пространства. Для Actor также характерно старомодное начертание некоторых символов, например, цифр 6 и 9.

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

31. Ubuntu

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

32. Rosario

Rosario является классическим гуманистическим гротеском, который прекрасно подойдет для стилизации абзацев текста.

33. Roboto Slab

Roboto Slab является одним из шрифтов семейства Roboto. Брусковая версия особенно привлекает взгляд своими геометрическими формами и открытыми изгибами. Он одинаково хорошо подходит для экранов гаджетов и печатных версий текстов.

34. Oswald

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

35. Stalemate

Stalemate – это изящный рукописный шрифт с некоторым винтажным оттенком. Он подходит для создания акцентов и персонализации вашего сайта.

36. Crimson Text

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