W3.CSS Шрифты
Страницы со стилем W3.CSS легко читать!
Страницы, стилизованные с помощью каскадной таблицы стилей W3.CSS легко читаются, даже для людей с небольшими нарушениями зрения.
- В W3.CSS по умолчанию размер шрифта составляет 15 пикселей
- По умолчанию используется шрифт Verdana с удобным межбуквенным интервалом
- Межстрочный интервал по умолчанию (1.5) также очень удобен
HTML Заголовки <h1> - <h6>
По умолчанию W3.CSS стилизирует HTML заголовки таким образом:
Пример
<h1>Заголовок 1 (36px)</h1>
<h2>Заголовок 2 (30px)</h2>
<h3>Заголовок 3 (24px)</h3>
<h4>Заголовок 4 (20px)</h4>
<h5>Заголовок 5 (18px)</h5>
<h6>Заголовок 6 (16px)</h6>
Попробуйте сами »
Классы размера шрифта (font-size)
Заголовки должны использоваться как есть: только как заголовки.
В W3.CSS размеры шрифта могут быть установлены с помощью следующих классов w3-size:
Пример
w3-tiny
w3-small
w3-medium (по-умолчанию)
w3-large
w3-xlarge
w3-xxlarge
w3-xxxlarge
w3-jumbo
Попробуйте сами »
Переопределение настроек W3.CSS по умолчанию
Переопределить настройки W3.CSS по умолчанию очень просто.
Есть как минимум три варианта:
- Переопределите настройки по умолчанию в разделе <head> веб-страницы
- Добавьте ссылку на свой собственный файл CSS после ссылки на файл W3.CSS
- Загрузите и измените содержимое файла W3.CSS на свое усмотрение
Переопределить в <head>
h1{font-size:64px;}
h2{font-size:48px;}
h3{font-size:36px;}
h4{font-size:24px;}
h5{font-size:20px;}
h6{font-size:18px;}
Попробуйте сами »
Добавить ссылку на свой собственный файл CSS
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet"
href="myStyle.css"> <!-- ссылка на свой файл css -->
Изменить W3.CSS
h1{font-size:36px} h2{font-size:30px} h3{font-size:24px} h4{font-size:20px} h5{font-size:18px} h6{font-size:16px}
Изменение шрифта страницы по умолчанию
В заголовке вашей веб-страницы (или в таблице стилей) после подключения W3.CSS измените стиль html и body:
Пример
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
html, body, h1, h2, h3, h4, h5, h6 {
font-family: "Comic Sans MS", cursive, sans-serif;
}
</style>
Попробуйте сами »
W3.CSS Внешние шрифты
С помощью W3.CSS очень легко добавлять новые шрифты на веб-страницу.
- Очень прост в использовании (только CSS и HTML)
- Неограниченное использование внешних библиотек шрифтов (например, Google Fonts)
- Работает во всех современных браузерах
Использование класса шрифтов
В заголовке веб-страницы (или в таблице стилей) создайте класс шрифта:
Пример
.w3-myfont {
font-family: "Comic Sans MS", cursive, sans-serif;
}
В теле (body) вашей веб-страницы используйте имя класса шрифта:
Использование внешних шрифтов
В заголовке веб-страницы добавьте внешний шрифт и присвойте шрифту имя класса:
Пример
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<style>
.w3-tangerine {
font-family: 'Tangerine', serif;
}
</style>
В теле (body) веб-страницы используйте имя класса:
Больше примеров
Пример
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster">
Попробуйте сами »
Пример
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster&effect=brick-sign">
Попробуйте сами »
Пример
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Allerta+Stencil">
Попробуйте сами »
Эффекты шрифта не работают в Internet Explorer 9 и более ранних версиях.
Примечание. Некоторые Google-шрифты отображаются только латиницей. При этом на русском языке (кириллицей) шрифты могут не работать! Это нужно учитывать при использовании Google-шрифтов на своих сайтах!
