Курс CSS. Урок 49. CSS3. Шрифты. Fonts.
Тему шрифтов мы изучали на предыдущих уроках, см
урок 07,
урок 08,
теперь разберем возможности стандарта CSS3.
Начнем с теории вопроса.
Судьба свойства (точнее, правила) @font-face непростая. Его то вводили в стандарт, то выводили, но вот, наконец, свойство @font-face есть в стандарте CSS3, и не просто есть, а поддерживается всеми браузерами.
Теперь вебдизайнер может использовать не только стандартные шрифты, а практические любые, какие ему позволят его технические навыки и представления о хорошем стиле. Шрифты можно скачать бесплатно или купить за деньги.
Шрифты можно создать самому. Некоторые студенты, например, специально создают шрифты под свой почерк. Зачем это нужно? Ответ, возможно вас удивит и поразит. Еще не так давно одним из основных требований преподавателей (а в наиболее ортодоксальных учебных заведениях это требование есть и сейчас, хотите верьте, хотите нет) было ведение конспектов лекций, причем обязательно вручную и обязательно своим почерком.
Дело это бессмысленное и утомительное и пытливый ум сразу нашел хорошее решение - разработка шрифта (или нескольких шрифтов) под свой почерк. После разработки шрифта необходимые материалы распечатываются в нужном виде (сами тексты легко найти в Интернете), и студент может гордо предьявить преподавателю толстые и аккуратные конспекты.
Форматы шрифтов.
Тут все не очень просто. Форматов шрифтов очень много. Попробуем перечислить некоторые из них: TTF, WOFF, EOT, OTF, CFF, AFM, LWFN, FFIL, FON, PFM, PFB, SVG, STD, PRO, XSF...
Ситуацию еще несколько осложняет тот факт, что сами браузеры по разному поддерживают разные типы шрифтов.
IE9+, Firefox, Гугль Хром, Safari, Opera поддерживают шрифты WOFF (Web Open Font Format).
Firefox, Гугль Хром, Safari, Opera поддерживают шрифты типа TTF (True Type Fonts) и OTF (OpenType Fonts).
Гугль Хром, Safari, Opera также поддерживают тип SVG.
IE также поддерживает шрифты EOT (Embedded OpenType).
Как подключать шрифты.
Сначала следует в правиле @font-face определить имя для шрифта (например, ekaterina1), а затем указать на файл шрифта.
Для избежания глюков следует использовать только строчные буквы в указании урла шрифта.
Рассмотрим все возможные описания внутри правила @font-face:
В результате мы можем теперь отображать тексты почерком Александра Сергеевича Пушкина:
css_049_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_049_001.zip ← скачайте пример, чтобы установить на свой сайт...
Начнем с теории вопроса.
| NN | Свойство | Гугль Хром | FireFox | IE | Safari | Opera |
|---|---|---|---|---|---|---|
| 65 | @font-face | 4 | 3.6 | 9 | 3 | 10 |
Судьба свойства (точнее, правила) @font-face непростая. Его то вводили в стандарт, то выводили, но вот, наконец, свойство @font-face есть в стандарте CSS3, и не просто есть, а поддерживается всеми браузерами.
Теперь вебдизайнер может использовать не только стандартные шрифты, а практические любые, какие ему позволят его технические навыки и представления о хорошем стиле. Шрифты можно скачать бесплатно или купить за деньги.
Шрифты можно создать самому. Некоторые студенты, например, специально создают шрифты под свой почерк. Зачем это нужно? Ответ, возможно вас удивит и поразит. Еще не так давно одним из основных требований преподавателей (а в наиболее ортодоксальных учебных заведениях это требование есть и сейчас, хотите верьте, хотите нет) было ведение конспектов лекций, причем обязательно вручную и обязательно своим почерком.
Дело это бессмысленное и утомительное и пытливый ум сразу нашел хорошее решение - разработка шрифта (или нескольких шрифтов) под свой почерк. После разработки шрифта необходимые материалы распечатываются в нужном виде (сами тексты легко найти в Интернете), и студент может гордо предьявить преподавателю толстые и аккуратные конспекты.
Форматы шрифтов.
Тут все не очень просто. Форматов шрифтов очень много. Попробуем перечислить некоторые из них: TTF, WOFF, EOT, OTF, CFF, AFM, LWFN, FFIL, FON, PFM, PFB, SVG, STD, PRO, XSF...
Ситуацию еще несколько осложняет тот факт, что сами браузеры по разному поддерживают разные типы шрифтов.
IE9+, Firefox, Гугль Хром, Safari, Opera поддерживают шрифты WOFF (Web Open Font Format).
Firefox, Гугль Хром, Safari, Opera поддерживают шрифты типа TTF (True Type Fonts) и OTF (OpenType Fonts).
Гугль Хром, Safari, Opera также поддерживают тип SVG.
IE также поддерживает шрифты EOT (Embedded OpenType).
Как подключать шрифты.
Сначала следует в правиле @font-face определить имя для шрифта (например, ekaterina1), а затем указать на файл шрифта.
@font-face
{
font-family: ekaterina1;
src: url('fonts/ekaterina1.ttf');
}
.block_1_css_049 {
font-family: ekaterina1;
line-height:32px;
background-color:#E1E2E6;
width:320px;
border:5px double #777777;
padding:20px;
margin:0px auto 10px auto;
font-size:20px;
border-radius:10px;
box-shadow: 6px 7px 5px #979797;
background-image: url('images/pushkin_120x120.jpg');
background-repeat:no-repeat;
background-position:right bottom;
}
Для избежания глюков следует использовать только строчные буквы в указании урла шрифта.
Рассмотрим все возможные описания внутри правила @font-face:
| NN | Дескрипторы | Значения | Описание |
|---|---|---|---|
| 1 | font-family | name | Обязательный параметр. Определяет имя для шрифта. Required. Defines a name for the font. |
| 2 | src | URL | Обязательный параметр. Определяет полный путь к файлу шрифта. Required. Defines the URL of the font file. |
| 3 | font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
Необязательный параметр. Определяет сжатие шрифта. Значение по уполчанию "normal". Optional. Defines how the font should be stretched. Default is "normal". |
| 4 | font-style | normal italic oblique |
Необязательный параметр. Определяет стиль шрифта. Значение по уполчанию "normal". Optional. Defines how the font should be styled. Default is "normal" |
| 5 | font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
Необязательный параметр. Определяет жирность (насыщенность) шрифта. Значение по уполчанию "normal". Optional. Defines the boldness of the font. Default is "normal". |
| 6 | unicode-range | unicode-range | Необязательный параметр. Определяет жирность (насыщенность) шрифта. Значение по уполчанию "U+0-10FFFF". Optional. Defines the range of UNICODE characters the font supports. Default is "U+0-10FFFF". |
В результате мы можем теперь отображать тексты почерком Александра Сергеевича Пушкина:
В красавиц он уж не влюблялся,
А волочился как-нибудь;
Откажут - мигом утешался;
Изменят - рад был отдохнуть.
Он их искал без упоенья,
А оставлял без сожаленья,
Чуть помня их любовь и злость.
Так точно равнодушный гость
На вист вечерний приезжает,
Садится; кончилась игра:
Он уезжает со двора,
Спокойно дома засыпает
И сам не знает поутру,
Куда поедет ввечеру.
Теперь отобразим новые полученные знания на нашем учебном тестовом примере.
А волочился как-нибудь;
Откажут - мигом утешался;
Изменят - рад был отдохнуть.
Он их искал без упоенья,
А оставлял без сожаленья,
Чуть помня их любовь и злость.
Так точно равнодушный гость
На вист вечерний приезжает,
Садится; кончилась игра:
Он уезжает со двора,
Спокойно дома засыпает
И сам не знает поутру,
Куда поедет ввечеру.
css_049_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_049_001.zip ← скачайте пример, чтобы установить на свой сайт...
***** Машина-Функционал для передвижения по страничкам курса CSS *****
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
