Жирный текст

Жирный текст

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

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

Курсив

Курсив

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

Зачеркнутый

Возможности атрибута 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 – шрифт строки состояния.

Что на самом деле видит посетитель сайта, при применении нестандартного Web-шрифта на данном этапе развития браузеров?

Многие мучаются при создании сайта. Во многих случаях на сайте требуется применить нестандартный шрифт или иероглиф. Вы скачиваете красивый шрифт и начинаете верстать страницу, но не у всех пользователей есть такие шрифты. Некоторые не смущаются и просто создают графический файл, используя нужный им шрифт, но дополнительная графика не всегда подходит странице и у многих её и так хватает. Но есть один подходящий выход! Этим выходом является использования технологии CSS (Cascading Style Sheets) или просто "Каскадных таблиц стилей". Обычно CSS заключается в сам, создаваемый файл, страничку, но можно создать файл CSS (.css) отдельно и соединить его путём прописки между тегом таким образом:

И нам с помошью CSS нужно автоматически закачать и установить файл шрифта True Type Font (.ttf), но установка произойдет только в том случае, если компьютер пользователя не обнаружит требуемого шрифта. Первым делом мы должны указать место положения шрифта. Для этого прописываем между тегами и так:

Таким образом вы можете использовать любые шрифты на своём сайте. Но советую сильно не изощряться, так как сам процесс закачки и установки шрифта тоже требует определённого времени. И если у вас сам шрифт "весит" 500kb и больше, то его не рекомендуется использовать в этом случае.

Честно говоря, проще и правильней делать так:

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

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

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

Making the Web Beautiful!

Google определяет браузер и выдает валидный для него CSS и шрифт.

В очередном проекте в очередной раз вижу заголовки и меню нестандартным шрифтом. Сделать картинками? Отстой: неудобно, негибко, медленно. Flash? Терпеть его не могу. Javascript? Лучшее конечно на сейчас решение, но все равно это костыль, который напоминает об инвалидности браузеров. Пора покопать стандарты: что предлагают и где это уже работает.

Заметка

Нестандартный шрифт в отличии от — это шрифт, который с большой вероятностью будет отсутствовать у большинства посетителей сайта.

Задача

Внедрить нестандартный шрифт без использования картинок, javascript и flash. Используем только последние достижения в .

Решение

Вот только для IE не все так просто. Хотя он и первый начал поддерживать внедрение сторонних шрифтов (еще с 1997 года с выходом Internet Explorera 4-й версии!!!), он требует особого формата для шрифта — EOT (Embedded OpenType). Формат EOT решает сразу две задачи:

• сжимает файл шрифта, делая его вес в разы меньше (судя по тестам коллег этот метод лучше сжимает чем и RAR, и ZIP, и gzip методы)
• шифрует файл: в файл шрифта записывается информация, где он должен быть использован. Вне этого адреса этот шрифт работать не будет.

В итоге подключение шрифта в стилях будет выглядеть в виде такого хака:

/* только для Internet Explorer */ @font-face { font-family: Scriptorama; src: local("Scriptorama"), url(path-to/Scriptorama.eot); } /* далее для всех остальных браузеров */ @font-face { font-family: Scriptorama; src: local("Scriptorama"), url(path-to/Scriptorama.ttf); } [...] h1 { font-family: Scriptorama, arial; font-weight: normal; }

Вместо хака можно воспользоваться .

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

@font-face { font-family: "JournalRegular"; src: url("journal-webfont.eot"); src: url("journal-webfont.eot?#iefix") format("embedded-opentype"), url("journal-webfont.woff") format("woff"), url("journal-webfont.ttf") format("truetype"), url("journal-webfont.svg#JournalRegular") format("svg"); font-weight: normal; font-style: normal; }

Заметка

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

Преимущества:

• гибкость — владелец сайта может как угодно менять любые тексты;
• быстрая скорость загрузки — минимальное количество внешних файлов при любом количестве текста нестандартным шрифтом;
• максимальная скорость работы сайта — ноль дополнительных элементов в DOM структуре, ноль скриптов и flash объектов, замедляющих сайт;
• текст ведет себя как текст (ведь он же остается текстом), т.е. выделяется, реагирует на изменения цвета, жирности, начертания и т.п., идеальное СЕО;
• довольно простая реализация даже с учетом оптимизаций шрифта.

Недостатки:

Сжатие и конвертация шрифта

Если разработчики шрифта пытались угодить всем и вся, тогда шрифт скорей всего будет содержать символов много-много и соответственно весить много-много. Так шрифт Arial Unicode MS содержит 51 тысячу знаков и весит 23 с лишним мегабайт! Самое время подумать, а будет ли на сайте использоваться удмуртский или фино-угорские языки? А еще различные дополнительные символы, знаки препинания и цифры? А еще следует обратить внимание, что каждый шрифт имеет определенное количество начертаний: обычный, курсив, жирный, полужирный. Шрифт может содержать до 9 видов жирности (вспомни допустимые значения ).

Что делать

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

Как делать

С этим могут помочь:

Онлайн сервис @font-face Generator

Что может:

• два режима работы: Easy — кто не хочет вникать и Expert — для максимальной оптимизации
• разные форматы результатов и это в одном месте! Т.е. не нужно сначала сжимать для всех браузеров True Type, а потом еще отдельно конвертировать в EOT для IE
• различные опции получения результата. Вплоть до защиты шрифта от локального использования и файла для Cufon!
• точный выбор символов для сжатого шрифта. Можно указать язык и набор дополнительных символов, а можно указать диапазон используемых символов, или просто перечислить символы, которые нужны, или использовать симбиоз всех способов
• для тех кто слаб в CSS, даже стилевые правила сформируют

Для эксперимента сжимал шрифт весом в 145Кб с тестовой задачей "Использовать для меню". Оставил только маленькие русские буквы. Итоговый размер шрифта вышел 8Кб. Поразительно!

Недостатки:

• EOT формируется без привязки к определенному домену (для серьезных проектов все же придется EOT делать отдельно)
• не все лицензионные шрифты может обработать (это недостаток относительный)

Впечатление — фантастика, превосходно, супер-пупер, обалдеть!!! Заведу себе Pay Pal чтобы сделать Donate.

Web Font Optimizer

Онлайн сервис, который позволяет оставить только необходимые символы. Работает .

Из плюсов: прост и понятен. В качестве результат получает True Type сжатый шрифт, EOT шрифт для IE и CSS код для подключения.

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

WEFT

ПО от Microsoft. Помогает перевести шрифт в EOT. Плюс делает невозможным использование шрифта вне указанного сайта. Скачать и познакомится детальней можно на странице, посвященной скрипту .

TTF2EOT

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

Online Font Converter

Прост в работе, позволяет конвертировать и лицензионные шрифты. Доступен .

Из минусов: требуется обязательно регистрация.

Как быть с защитой шрифта?

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

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

Заметка

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

Как же защитить шрифт?

Для IE эта проблема была решена сразу — формат EOT шифрует файл. Как следствие имеем шрифт, который будет работать только в пределах данного сайта.

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

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

Старый дизайн не соответствовал новой задумке , и я, не долго думая, взял более-менее понравившийся из общего репозитория WordPress’а.

Знаете в чем проблема некоторых готовых шаблонов, взятых оттуда? Проблема в корявой совместимости с кириллическими шрифтами. В моем случае, пострадали заголовки. Поскольку шрифт, на который ссылался CSS не содержал русских символов, оные брались из шрифта по умолчанию (то ли Sans, то ли Arial). В итоге, заголовки были ОГРОМНЫ и портили весь вид. Пришлось думать, чем заменить шрифт.

Способов это сделать — несколько.

Способ 1: Тупой

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

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

Не делайте так!

Способ 2: Преобразуем дизайн под стандартный шрифт

Это самый идеальный вариант , но, к сожалению, он не всегда годится, поскольку иногда из за него теряется «изюминка» дизайна. Тем не менее, ВСЕГДА рассматривайте такой подход, поскольку, как бы вы не старались, может получиться, что клиентский компьютер все-равно задействует шрифт из тех, которые имеются в наличии.

Безопасные шрифты, которые есть почти во всех операционных системах, это: Verdana (идеален для текстов) , Impact (иногда очень хорош в заголовках) , Arial, Arial Black, Comic Sans MS (кака, которую очень любят новички) , Courier New (подходит для примеров кода и форм) , Georgia, Times New Roman, Trebuchet MS.

Способ 3: Картинка вместо текста

Вариант очень кроссбраузерный и подходит для оформления статичных элементов. Например — шапки сайта. Делаете прозрачную PNG с текстом с нужным шрифтом, обрабатываете как вам надо и вставляете на сайт, не забыв заполнить ALT. Или то же самое, но текст прилепляем на какой-нибудь фон и сохраняем в JPG.

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

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

Способ 4: Cufon

Эти аплеты можно создать из файла шрифта с помощью онлайн-генератора http://cufon.shoqolate.com/generate/

Самый простой способ, воспользоваться http://www.google.com/fonts Выбираете нужный шрифт из представленных и получаете готовый код, который нужно вставить на сайт (в head, и в файл стилей), после чего всё работает.

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

Способ 4: Подключить шрифт к сайту с помощью CSS

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

Признаюсь, я не фанат IE и считаю его браузером для скачивания браузеров. Не более! Так что, пришлось сделать небольшое усовершенствование.

Чтобы подключить к сайту шрифт с помощью CSS нам понадобится сам шрифт (файл) и онлайн конвертер http://onlinefontconverter.com/

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

1. Заходите на сайт конвертера , хватаете имеющийся у вас шрифт и тащите вот в такое окошко (оно обычно в правой колонке).

2. Скачиваете шрифт в 4-х вариантах: EOT, OTF, TTF и WOFF. Этого должно хватить. Браузер, в процессе рендеринга страницы, сам выберет и скачает тот, который ему удобнее.

3. Заливаете шрифты на сайт. Я создал для этого в корне сайта папку «f» и разместил их туда.

Update 16.02.2015: На данный момент onlinefontconverter.com переделали и ни один из предложенных шрифтов он не сконвертировал((

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

4. Подключаете подгрузку шрифта к сайту. Для этого в css-файл, или в соответствующие тэги стилей, вписываем вот этот код.

@font-face{ font-family: EtoMoiFont; src: url(/f/myFont1.eot), url(/f/myFont1.otf), url(/f/myFont1.ttf), url(/f/myFont1.woff); }

font-family: EtoMoiFont; — говорит браузеру о том, как будет называться подгруженный шрифт. Название придумайте сами.

src: url(/f/myFont1.eot), url(/f/myFont1.otf), url(/f/myFont1.ttf), url(/f/myFont1.woff); — указывает путь и имена файлов шрифтов.

Почему шрифты идут именно в этом порядке?

Первым, я поставил EOT . Этот формат используют старые версии IE.

Вторым — OTF . Это сжатый формат шрифтов, который, по идее, весит меньше.

Третьим — TTF . Его понимают практически все браузеры. Хотя, бывает по разному. Например в iOS он может не открыться.

Последним — WOFF . Это должно хорошо читаться на маках, но проверить еще не было времени.

5. Обозначаете в файле стилей , каким семейством шрифтов выводить заголовки (в нашем случае заголовки h2 ).

h2{font-family: EtoMoiFont;}

Готово!

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

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

Вот, что получилось.

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

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

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

На этом всё. С вами был .
До новых встреч.

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

Как подключить шрифт на сайт в CSS

Например, у нас есть шрифт Raleway.ttf и мы хотим использовать его во всех заголовках(h1 ) нашего сайта. Для этого выполняем следующие действия:

h1 { font-family : "RalewayRegular" ; }

Теперь все заголовки 1-го уровня на сайте отображаются с нужным нам шрифтом.

Если вы хотите подключить несколько шрифтов(или их начертаний), то просто добавьте их под предыдущим:

@font-face { font-family : "RalewayRegular" ; src :url("../fonts/RalewayRegular.ttf" ) format("truetype" ) ; font-style : normal ; font-weight : normal ; } @font-face { font-family : "RalewayBold" ; src :url("../fonts/RalewayBold.ttf" ) format("truetype" ) ; font-style : normal ; font-weight : normal ; }

Вы могли заметить, что есть разные форматы шрифтов - .ttf, .woff, .eot, .svg и др. Еще существует формат для современных браузеров.woff2 , но о нем мы расскажем в одной из следующих статей. Обычно каждый шрифт подключается сразу в 3х форматах. Это сделано, чтобы шрифт правильно отображался во всех браузерах в т.ч. и старых. Выглядит это так:

@font-face { font-family : "RalewayRegular" ; src :url("../fonts/RalewayRegular/RalewayRegular.eot" ) ; src :url("../fonts/RalewayRegular/RalewayRegular.eot?#iefix" ) format("embedded-opentype" ) , url("../fonts/RalewayRegular/RalewayRegular.woff" ) format("woff" ) , url("../fonts/RalewayRegular/RalewayRegular.ttf" ) format("truetype" ) ; font-style : normal ; font-weight : normal ; }

Здесь следует обратить внимание на порядок подключения - это важно!

Не будем вдаваться в подробности, просто запомните вид этой конструкции.

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

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

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

Как подключить шрифт к шаблону Moguta CMS

Как добавить ссылку с Google fonts в шаблон Moguta CMS

Тематические материалы:

Как установить таймер на выключение компьютера

Нестандартный шрифт средствами CSS

☆ На что обратить внимание, плюсы и минусы ☆»

Пять способов безболезненно смотать наушники и избежать путаницы Как связать наушники чтобы не путались

Как узнать материнскую плату на ноутбуке: все способы

Как работает модем и зачем он вообще нужен

Программы для загрузки файлов

Параллельная конфигурация неправильна: как исправить