Тег | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 3.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Тег <basefont> предназначен для задания шрифта, размера и цвета текста по умолчанию. Указанные значения будут использоваться во всем документе за исключением тега <font>, в котором можно переопределить параметры оформления текста. Допускается использование тега в контейнере <head> или <body>, причем несколько раз. Это позволяет изменять вид шрифта для части документа.
Синтаксис
<basefont>Закрывающий тег
Не требуется.
Атрибуты
- color
- Устанавливает цвет текста.
- face
- Определяет гарнитуру шрифта.
- size
- Задает размер шрифта в условных единицах.
Валидация
Использование этого тега осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.
Пример
HTML 4.01IECrOpSaFx
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Тег BASEFONT</title> </head> <body> <basefont face="Arial, Helvetica, sans-serif" size="4" color="maroon"> <p>Добро пожаловать на мою страничку, которая оформлена с использованием тега BASEFONT</p> </body> </html>
Результат данного примера показан на рис. 1.
Рис. 1. Вид текста в браузере Internet Explorer 8
Размер шрифта CSS. Единицы измерения px, em, проценты — учебник CSS
Для обозначения размера шрифта в CSS необходимо указать соответствующее свойство и его значение. Размер шрифта определяется свойством font-size, для которого может быть установлен один из нескольких вариантов значений. Можно задать размер шрифта в пикселях, процентах, с помощью ключевых слов и т. д. Все это мы рассмотрим далее в этой подглаве, а сейчас взгляните на примеры задания размера шрифта:
/* в процентах: */
h2 {
font-size: 100%;
}
/* в единицах измерения em: */
h3 {
font-size: 1em;
}
/* в пикселях: */
h4 {
font-size: 18px;
}
/* с помощью ключевого слова: */
p {
font-size: small;
}
Размер шрифта в пикселях
Наиболее простой и понятный способ задать размер шрифта – использовать единицу измерения px. Вы сами указываете высоту шрифта. Допустим, вам необходим шрифт размером 24 пикселя. Для этого запишите стиль CSS:
font-size: 24px;
Размер шрифта в процентах
Вы наверняка уже сталкивались с ситуацией, когда размер шрифта в CSS не задан, вследствие чего браузеру приходится определять размер шрифта «по своему усмотрению». Если точнее, берется предустановленное значение по умолчанию. Именно от него зависят установленные в процентах значения. Например, базовый размер основного текста p, как правило, равняется 16 пикселям. Значение 100% эквивалентно базовому размеру шрифта, который предустановлен в браузере. Поэтому:
p {
font-size: 100%;
}
/* ...то же самое, что и значение в браузере по умолчанию: */
p {
font-size: 16px;
}
Если же в этом случае задать размер шрифта 50%, то он будет равен половине базового размера. Значение 200%, наоборот, увеличит шрифт в два раза.
Важно: процентные значения размера шрифта наследуются. Например, если для родительского тега задан размер шрифта 150%, то все вложенные в него теги также унаследуют это значение.
Единица измерения em
По принципу работы единица измерения em похожа на проценты. Значение 1em эквивалентно 100% и соответствует базовому размеру шрифта по умолчанию. Соответственно, 0.6em = 60%, 3em =
font-size: 0.9em; /* перед точкой можно опустить ноль: */ font-size: .9em;
Значения размеров шрифтов, указанные в em, наследуются (как и проценты). Это создает некоторые трудности при работе с CSS. Например, если для родительского элемента div задан размер шрифта 2em, то для вложенного в него такого же элемента div шрифт будет увеличен еще в два раза. Наглядный пример можно увидеть на скриншоте:
В качестве альтернативы можно воспользоваться новой единицей измерения, введенной в CSS3 – rem, которая всегда отталкивается от базового размера шрифта. Если в нашем примере изменить значение 2em на 2rem, то размер шрифта вложенного элемента div станет таким же, так у родительского. Недостатком единицы измерения rem является то, что она не поддерживается некоторыми браузерами, а именно Internet Explorer версии 8 (и ранее), а также Opera Mini 8.
Ключевые слова
Задать размер текста CSS можно и с помощью специальных ключевых слов, которые также зависят от базового размера шрифта в браузере. Если ориентироваться на стандартный размер шрифта для основного текста (16 пикселей) и не брать во внимание случаи, когда базовый размер был изменен, то таблица ниже показывает соответствие между ключевым словом и размером шрифта в пикселях:
| Ключевое слово | Размер в пикселях |
|---|---|
| xx-small | 9px |
| x-small | 10px |
| small | 13px |
| medium | 16px |
| large | 19px |
| x-large | 24px |
| xx-large | 32px |
Как видим, значение medium соответствует базовому размеру шрифта 16px. Использование ключевых слов ограничивает возможности и лишает гибкости, поэтому профессиональные разработчики не применяют их.
Завершение
Читайте далее: как установить жирный шрифт и курсив в CSS.
Теги Font (Face, Size и Color), Blockquote и Pre — устаревшее форматирование текста в чистом HTML (без использования CSS)
Главная / Как устроены сайты / Html за 10 уроков10 января 2021
- Blockquote и Pre — форматирование в HTML
- Font — работа с цветом и шрифтом текста в чистом Html
- Задаем тип шрифта в Html с помощью Face для тега Font
- Strong и Em — тэги выделений в тексте
Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня продолжим добавление новых материалов по тематике чистого Html. Чуть позже мы перейдем к изучению CSS, но сначала следует разобрать все нюансы, связанные с языком ХТМЛ. До этого уже успели рассмотреть директивы комментариев и doctype, а также теги h2-H6 (заголовки), Hr (линия), P (абзац), Br (перенос строки) и атрибуты Html тэгов (align, width).
Мы узнали как добавить средствами таблицу, а также как вставить картинку в Html код через тег Img, создать веб форму или список через теги UL, OL, LI, DL, ну и еще, в свое время, мы успели затронуть основы популярной верстки сайтов. Сегодня продолжим рассмотрение различных тэгов, а именно Font, Blockquote, Pre, Strong, Em, B, I и других, позволяющих осуществлять форматирование текста.
Blockquote и Pre — форматирование в HTML
Раньше(еще до появления CSS) тег цитаты Blockquote в Html коде использовался довольно часто, потому что фрагмент текста, заключенный в него, получал горизонтальный отступ, что было не так-то просто сделать в то время в силу невозможности использования CSS свойств. Элемент Blockquote является парным и внутри него могут находиться как строчные теги, так и блочные (например, абзацы P).
<p>Пример</p> <blockquote><p>Пример, заключенный в Blockquote</p></blockquote>
Сейчас тег Blockquote по-прежнему используется при оформлении текста, но внешний вид цитат в наше время уже обычно задается с помощью CSS свойств, прописанных именно для него в файле с таблицами стилей вашего шаблона оформления. Например, в случае моего блога, в style.css можно найти следующие строки:
#content blockquote{margin:15px 0 20px 0;padding:5px 8px 5px 35px;background:#eaedf0 url(images/quote2.png) no-repeat left top;background-position:8px 5px;color:#666;font-size:14px;width:91%;font-style:italic;}
#content blockquote p{color:#666;font-size:14px;}Ну, а то, как будут при этом выглядеть цитататы, заключенные в Blockquote, вы можете увидеть в тексте статьи с интервью с руководителем биржи ГоГетЛинкс.
Кроме цитаты в Html раньше (до появления CSS) довольно широко использовался еще один тег форматирования — Center. Он является парным (своеобразный контейнер) и блочным. В нем можно заключать любые элементы текста (как строчные, так и блочные), которые в результате сего действа будут выровнены по центру.
Сейчас этот тег Center не рекомендован валидатором WC3 для применения, но вполне может использоваться при форматирования, например, в почтовой рассылке на subscribe, когда стилевое оформление применять будет сложновато.
Так, теперь давайте рассмотрим тэг Pre, который позволяет передать форматирование текста заданное непосредственно в исходном коде. Помните я говорил, что все идущие подряд в Html коде пробельные символы (пробел, табуляция и перенос строки) будут при разборе кода в браузере заменены одним единственным пробелом.
Так вот, элемент Pre запрещает сокращение пробельных символов в участке текста, который будет в него заключен. Что примечательно, для фрагмента, заключенного в Pre, браузер не будет осуществлять автоматический перенос строк по пробельным символам.
Т.е. все строки внутри элемента Pre будут считаться браузером неразрывными — как вы написали в коде, так и будет отображаться в браузере. Причем, в обозревателе для отображения участка текста, отформатированного с помощью тега Pre, будет использоваться моноширинный шрифт, типа Courier New или подобные ему.
<pre> форматирование в исходном коде тэг Pre теги устаревшие </pre>
Сам тэг Pre является блочным, а внутри него (этот тег парный) может быть заключен только строчный контент (т.е. внутри него не следует размещать абзацы P, заголовков h2 — H6 и т.п.).
В Html есть еще один блочный тэг, который предназначен для форматирования текста — Address. Внутри этого тега может располагаться по стандартам валидатора только строчный контент, который будет отображен в браузере курсивом.
Font — работа с цветом и шрифтом текста в чистом Html
Помните, мы говорили про цвета в Html коде? Так вот, раньше в языке гипертекстовой разметки, когда еще и речи не шло про CSS, для задания цвета текста в документе использовали специальный атрибут Text, который прописывался в тэге Body (а через атрибут Bgcolor можно было задать цвет фона для документа):
<body text="#ffffff" bgcolor="red">
Если нужно было изменить цвет небольшого фрагмента текста, то использовали атрибут Color в теге Font, который на данный момент является устаревшим и не рекомендованным к применению валидатором W3C, но его еще можно встретить в коде некоторых движков сайтов (систем управления контентом или CMS, о которых тут шла речь), да и в той же почтовой рассылке он может использоваться.
Хотя, конечно же, сейчас гораздо правильнее вместо Font использовать CSS свойства. Но не суть важно, мы поговорим об этом устаревшем элементе для общего, так сказать, развития.
Тег Font является строчным и поэтому внутри него можно заключать только строчные элементы (абзацы и заголовки внутрь него попадать не должны, иначе Html код перестанет быть валидным). Естественно, что он является парным, т.е. вы с помощью него заключаете слова в своеобразный контейнер для его последующего форматирования.
<font color="red"> Устаревшее форматирование фрагмента текста</font>
Устаревшее форматирование — несколько слов, покрашенных в красный цвет с помощью Font и его атрибута Color. Но этот элемент может не только изменять цвет заключенного внутри него слова, но и изменять его размер (атрибут Size) и начертание шрифта (атрибут Face).
Задавая размер шрифта с помощью атрибута Size тега Font, вы могли использовать только семь значений (от 1 до 7 — это не пиксели, а относительные размеры). Причем, базовый размер шрифта, принятый в браузере по умолчанию, соответствовал значению Size равному трем, а шестерка соответствовала размеру заголовка h2, принятому в данном браузере. Все остальные цифры для Size отдавались на усмотрение данного конкретного обозревателя.
Задаем тип шрифта в чистом Html с помощью Face для элемента Font
Теперь давайте рассмотрим задание начертания шрифта в чистом Html коде (без использования таблиц каскадных стилей) с помощью Face.
Вообще, все шрифты делятся на несколько больших групп:
- Серифные (serif) или же, по-другому, с засечками (засечки идут по верхнему и нижнему краю букв этих шрифтов). К этому типу относится Times New Roman.
- Рубленные(sans-serif) или, по-другому, без засечек, ярким представителем которых является Arial.
- Моноширинные (monospace) — все буквы в таких шрифтах имеют одинаковую ширину. Типичным представителем является все тот же Courier.
В любом браузере есть настройки, где можно задать используемый по умолчанию шрифт и его размер для каждого из приведенных выше семейств. Например, в Firefox добраться до этих настроек можно, выбрав из меню пункты и вкладки «Настройки» — «Настройки» — «Содержимое» — «Дополнительно»:
Т.е. в любом браузере будет задан шрифт и его размер для любого из трех основных семейств (serif, sans-serif и monospace). Если в Html коде начертание и размер будут явно заданы, то они и будут использоваться браузером для отображения.
Но может возникнуть ситуация, когда нужный шрифт просто может быть не установлен на компьютере пользователя, просматривающего ваш сайт. Что же тогда будет делать браузер?
Вопрос довольно интересный, и чтобы ответ на него вас не разочаровал, нужно просто правильно задать начертание шрифта в атрибуте Face тэга Font или же в соответствующем CSS свойстве таблицы каскадных стилей.
Посмотрим это на примере тега Font. Итак, заключаем нужный кусок текста в фонты и прописываем в открывающем элементе значения для атрибута Face в виде перечня шрифтов, которые вы хотели бы здесь использовать (в порядке убывания их приоритета). Например, так:
<font face="Verdana,Arial,sans-serif">фрагмент текста</font>
Т.е. браузер при разборе этого кода, наткнувшись на такую запись, попытается сначала найти установленный на компьютере пользователя фонт под названием Verdana, а если его не найдет, то попытается отрисовать данный фрагмент текста с помощью Arial.
Ну, а если случится страшное и даже Arial на компьютере пользователя найдено не будет, то браузер будет отрисовывать данный кусок текста тем фонтом, который задан в настройках браузера шрифтом по умолчанию для данного семейства (в нашем случае семейства Sans-serif).
А вот если вы не укажете в атрибуте Face тега Font в самом конце название семейства (в нашем примере это sans-serif), то будет взят тот шрифт, который в браузере принят по умолчанию для всех случаев жизни, и он уже может быть не из того семейства, которое вы хотели бы.
Как вы, наверное, поняли, существует проблема в использовании на сайте абсолютно любых шрифтов, которые бы вам захотелось. Почему? Потому что есть вероятность, что у части посетителей вашего сайта их на компьютерах просто-напросто не будет установлено.
Но тем не менее есть набор шрифтов, которые с большой долей вероятности найдутся на компьютерах с ОС Windows, а также и на Линуксе, и Макинтоше, и которые будут входить в базовую поставку всех этих операционных систем.
Т.е. без особых проблем можно использовать на своем сайте Arial, Verdana, Times New Roman, Tahoma, Georgia, Trebuchet MS, Courier New, Comic Sans MS. Одно из возможных решений проблемы скудности шрифтов я подробно описал в статье Красивые шрифты для сайта в онлайн сервисе Google Font.
Strong, Em — тэги логических и визуальных выделений в тексте
Если бы сейчас не существовало CSS, то я должен был бы описать назначение тех или иных тегов логического и физического (визуального) форматирования текста. Но, т.к. CSS сейчас уже используется на подавляющем большинстве сайтов, то роль подобных тэгов в Html коде уже практически сведена к нулю, поэтому я лишь быстро пробегусь по ним и объясню для чего они использовались раньше (а некоторые используются и сейчас).
Визуальные теги предназначены для изменения начертания текста, которое будет видно посетителям вашего сайта, но которому не должны уделять какое-то особое внимание поисковые системы.
Логические же теги форматирования текста, по идее, ориентированы для указания каких-либо акцентов поисковым машинам. Для пользователя выделение этими элементами тоже будет изменять внешний вид выделенных слов.
Если вы помните, то не так уж давно оптимизаторам советовали выделять значимые места с ключевыми словами (как нужно выделять ключевые слова в тексте) тегами логического форматирования Strong и EM, которые для пользователя будут выглядеть как обычное выделение жирным и курсивом.
А вот для выделений без ключевых слов советовали использовать Html элементы «B» и «I», которые для пользователей опять же выглядели бы тоже как выделение жирным и курсивом, но уже поисковыми машинами не учитывались, т.к. они не являются тэгами логического форматирования.
Сейчас все это уже практически не работает так, как задумывалось, и выделение ключевых слов с помощью Strong и EM мы делаем скорее по привычке, нежели действительно надеясь на определенные дивиденды за это со стороны поисковых систем.
Хотя, кто их знает, может быть мало-мальское влияние Strong и EM на оптимизацию текста еще осталось (читайте про продвижение сайтов своими силами).
Итак, кроме уже упомянутых «B» и «I» (выделение жирным и курсивом) к разряду визуального форматирования можно отнести уже рассмотренные в начале статьи Font, Pre, а также теги:
- «U» — выделение подчеркиванием
- «Strike» — перечеркивание
- «Sup» — верхний индекс
- «Sub» — нижний индекс
- «Tt» — выделение моноширинным шрифтом
- «Big» — увеличить шрифт
- «Small» — уменьшить шрифт
Ну, а теперь давайте рассмотрим перечень элементов логического форматирования текста:
- «Em» — логическое выделение важных фрагментов курсивом
- «Strong» — то же самое, но только выделяться будет жирным
- «Cite» — выделение цитат курсивом
- «Code» — предназначен для отображения разнообразных кодов моноширинным фонтом
- «Samp» — для выделения нескольких символов моноширинным фонтом
- «Abbr» — в атрибуте Title этого тэга прописывается расшифровка какой-либо аббревиатуры (типа, CSS или Html, которые читаются по буквам, а не как единое слово). Прописанные в Title слова будут всплывать при подведении к этой аббревиатуре курсора мыши.
- «Acronym» — то же самое, но используется для акронимов, т.е. сокращений, которые читаются не по буквам, а как слово (например, МКАД или Гаи)
- «Kbd» — используется для отображения моноширинным шрифтом текста, вводимого пользователем сайта с клавиатуры
- «Var» — используется для выделения курсивом переменных в каком-либо коде
- «Del» — выделение перечеркиванием, когда требуется показать, что какой-то фрагмент был удален после опубликования Html документа
- «Ins» — выделение подчеркиванием, когда нужно показать, что какой-то кусок был вставлен после публикации Html документа
Еще раз повторюсь, что данные тэги форматирования в своем большинстве очень редко встречаются при написании кода сейчас, но все же знать их назначение будет не лишне.
Внимание! Тег Font и атрибуты Html тэгов (align, width) сейчас не рекомендуются к использованию. Вместо них нужно использовать соответствующие CSS свойства.
Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru
Использую для заработка
Основы стилизирования текста и шрифта — Изучение веб-разработки
В данной статье мы начнем путь к овладению стилизацией текста при помощи CSS. Мы подробно изучим основы стилизации текста и шрифта, такие как толщина, начертание, семейство, стенография, выравнивание текста и другие эффекты, а также рассмотрим междустрочный и межбуквенный интервалы.
| Необходимые знания: | Базовые компьютерные знания, Основы HTML (раздел Введение в HTML), основы CSS (раздел Введение в CSS). |
|---|---|
| Задача: | Изучить основные свойства и техники, необходимые для стилизации текста на веб-страницах. |
Как вы уже проверили в своей работе с HTML и CSS, текст внутри элемента выкладывается в поле содержимого элемента. Он начинается в левом верхнем углу области содержимого (или в правом верхнем углу, в случае содержимого языка RTL) и течет к концу строки. Как только он достигает конца, он переходит к следующей строке и продолжает, затем к следующей строке, пока все содержимое не будет помещено в коробку. Текстовое содержимое эффективно ведет себя как ряд встроенных элементов, размещенных на соседних строках и не создающих разрывы строк до тех пор, пока не будет достигнут конец строки, или если вы не принудите разрыв строки вручную с помощью элемента <br>.
Примечание: если приведенный выше абзац оставляет вас в замешательстве, то не имеет значения — вернитесь и просмотрите нашу статью о модели коробки, чтобы освежить теорию модели коробки, прежде чем продолжить.
Свойства CSS, используемые для стилизации текста, обычно делятся на две категории, которые мы рассмотрим отдельно в этой статье:
- Font styles: Свойства, влияющие на шрифт, применяемый к тексту, влияющие на то, какой шрифт применяется, насколько он велик, является ли он полужирным, курсивным и т. д.
- Text layout styles: Свойства, влияющие на интервал и другие особенности компоновки текста, позволяющие манипулировать, например, пространством между строками и буквами, а также тем, как текст выравнивается в поле содержимого.
Примечание: имейте в виду, что текст внутри элемента все затронуты как одна единая сущность. Вы не можете выбирать и стилизовать подразделы текста, если вы не обернете их в соответствующий элемент (например, <span> или <strong>), или использовать текстовый псевдоэлемент, такой как ::first-letter (выделяет первую букву текста элемента),:: first-line (выделяет первую строку текста элемента) или ::selection (выделяет текст, выделенный в данный момент курсором.)
Давайте сразу перейдем к рассмотрению свойств для стилизации шрифтов. В этом примере мы применим некоторые различные свойства CSS к одному и тому же образцу HTML, который выглядит следующим образом:
<h2>Tommy the cat</h2>
<p>Well I remember it as though it were a meal ago...</p>
<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
may have nestled its way into his mighty throat. Many a fat alley rat
had met its demise while staring point blank down the cavernous barrel of
this awesome prowling machine. Truly a wonder of nature this urban
predator — Tommy the cat had many a story to tell. But it was a rare
occasion such as this that he did.</p>You can find the finished example on GitHub (see also the source code.)
Color
The color property sets the color of the foreground content of the selected elements (which is usually the text, but can also include a couple of other things, such as an underline or overline placed on text using the text-decoration property).
color can accept any CSS color unit, for example:
p {
color: red;
}This will cause the paragraphs to become red, rather than the standard browser default black, like so:
Font families
To set a different font on your text, you use the font-family property — this allows you to specify a font (or list of fonts) for the browser to apply to the selected elements. The browser will only apply a font if it is available on the machine the website is being accessed on; if not, it will just use a browser default font. A simple example looks like so:
p {
font-family: arial;
}This would make all paragraphs on a page adopt the arial font, which is found on any computer.
Web safe fonts
Speaking of font availability, there are only a certain number of fonts that are generally available across all systems and can therefore be used without much worry. These are the so-called web safe fonts.
Most of the time, as web developers we want to have more specific control over the fonts used to display our text content. The problem is to find a way to know which font is available on the computer used to see our web pages. There is no way to know this in every case, but the web safe fonts are known to be available on nearly all instances of the most used operating systems (Windows, macOS, the most common Linux distributions, Android, and iOS).
The list of actual web safe fonts will change as operating systems evolve, but it’s reasonable to consider the following fonts web safe, at least for now (many of them have been popularized thanks to the Microsoft Core fonts for the Web initiative in the late 90s and early 2000s):
| Name | Generic type | Notes |
|---|---|---|
| Arial | sans-serif | It’s often considered best practice to also add Helvetica as a preferred alternative to Arial as, although their font faces are almost identical, Helvetica is considered to have a nicer shape, even if Arial is more broadly available. |
| Courier New | monospace | Some OSes have an alternative (possibly older) version of the Courier New font called Courier. It’s considered best practice to use both with Courier New as the preferred alternative. |
| Georgia | serif | |
| Times New Roman | serif | Some OSes have an alternative (possibly older) version of the Times New Roman font called Times. It’s considered best practice to use both with Times New Roman as the preferred alternative. |
| Trebuchet MS | sans-serif | You should be careful with using this font — it isn’t widely available on mobile OSes. |
| Verdana | sans-serif |
Note: Among various resources, the cssfontstack.com website maintains a list of web safe fonts available on Windows and macOS operating systems, which can help you make your decision about what you consider safe for your usage.
Note: There is a way to download a custom font along with a webpage, to allow you to customize your font usage in any way you want: web fonts. This is a little bit more complex, and we will be discussing this in a separate article later on in the module.
Default fonts
CSS defines five generic names for fonts: serif, sans-serif, monospace, cursive and fantasy. Those are very generic and the exact font face used when using those generic names is up to each browser and can vary for each operating system they are running on. It represents a worst case scenario where the browser will try to do its best to provide at least a font that looks appropriate. serif, sans-serif and monospace are quite predictable and should provide something reasonable. On the other hand, cursive and fantasy are less predictable and we recommend using them very carefully, testing as you go.
The five names are defined as follows:
| Term | Definition | Example |
|---|---|---|
serif | Fonts that have serifs (the flourishes and other small details you see at the ends of the strokes in some typefaces) | My big red elephant |
sans-serif | Fonts that don’t have serifs. | My big red elephant |
monospace | Fonts where every character has the same width, typically used in code listings. | My big red elephant |
cursive | Fonts that are intended to emulate handwriting, with flowing, connected strokes. | My big red elephant |
fantasy | Fonts that are intended to be decorative. | My big red elephant |
Font stacks
Since you can’t guarantee the availability of the fonts you want to use on your webpages (even a web font could fail for some reason), you can supply a font stack so that the browser has multiple fonts it can choose from. This simply involves a font-family value consisting of multiple font names separated by commas, e.g.
p {
font-family: "Trebuchet MS", Verdana, sans-serif;
}In such a case, the browser starts at the beginning of the list and looks to see if that font is available on the machine. If it is, it applies that font to the selected elements. If not, it moves on to the next font, and so on.
It is a good idea to provide a suitable generic font name at the end of the stack so that if none of the listed fonts are available, the browser can at least provide something approximately suitable. To emphasise this point, paragraphs are given the browser’s default serif font if no other option is available — which is usually Times New Roman — this is no good for a sans-serif font!
Note: Font names that have more than one word — like Trebuchet MS — need to be surrounded by quotes, for example "Trebuchet MS".
A font-family example
Let’s add to our previous example, giving the paragraphs a sans-serif font:
p {
color: red;
font-family: Helvetica, Arial, sans-serif;
}This gives us the following result:
Font size
In our previous module’s CSS values and units article, we reviewed length and size units. Font size (set with the font-size property) can take values measured in most of these units (and others, such as percentages), however the most common units you’ll use to size text are:
px(pixels): The number of pixels high you want the text to be. This is an absolute unit — it results in the same final computed value for the font on the page in pretty much any situation.ems: 1emis equal to the font size set on the parent element of the current element we are styling (more specifically, the width of a capital letter M contained inside the parent element.) This can become tricky to work out if you have a lot of nested elements with different font sizes set, but it is doable, as you’ll see below. Why bother? It is quite natural once you get used to it, and you can useemto size everything, not just text. You can have an entire website sized usingem, which makes maintenance easy.rems: These work just likeem, except that 1remis equal to the font size set on the root element of the document (i.e.<html>), not the parent element. This makes doing the maths to work out your font sizes much easier, although if you want to support really old browsers, you might struggle —remis not supported in Internet Explorer 8 and below.
The font-size of an element is inherited from that element’s parent element. This all starts with the root element of the entire document — <html> — the font-size of which is set to 16px as standard across browsers. Any paragraph (or another element that doesn’t have a different size set by the browser) inside the root element will have a final size of 16 px. Other elements may have different default sizes, for example an <h2> element has a size of 2 em set by default, so it will have a final size of 32 px.
Things become more tricky when you start altering the font size of nested elements. For example, if you had an <article> element in your page, and set its font-size to 1.5 em (which would compute to 24 px final size), and then wanted the paragraphs inside the <article> elements to have a computed font size of 20 px, what em value would you use?
<article>
<p>My paragraph</p>
</article>You would need to set its em value to 20/24, or 0.83333333 em. The maths can be complicated, so you need to be careful about how you style things. It is best to use rem where you can, to keep things simple, and avoid setting the font-size of container elements where possible.
A simple sizing example
When sizing your text, it is usually a good idea to set the base font-size of the document to 10 px, so that then the maths is a lot easier to work out — required (r)em values are then the pixel font size divided by 10, not 16. After doing that, you can easily size the different types of text in your document to what you want. It is a good idea to list all your font-size rulesets in a designated area in your stylesheet, so they are easy to find.
Our new result is like so:
html {
font-size: 10px;
}
h2 {
font-size: 5rem;
}
p {
font-size: 1.5rem;
color: red;
font-family: Helvetica, Arial, sans-serif;
}Font style, font weight, text transform, and text decoration
CSS provides four common properties to alter the visual weight/emphasis of text:
font-style: Used to turn italic text on and off. Possible values are as follows (you’ll rarely use this, unless you want to turn some italic styling off for some reason):normal: Sets the text to the normal font (turns existing italics off.)italic: Sets the text to use the italic version of the font if available; if not available, it will simulate italics with oblique instead.oblique: Sets the text to use a simulated version of an italic font, created by slanting the normal version.
font-weight: Sets how bold the text is. This has many values available in case you have many font variants available (such as -light, -normal, -bold, -extrabold, -black, etc.), but realistically you’ll rarely use any of them except fornormalandbold:normal,bold: Normal and bold font weightlighter,bolder: Sets the current element’s boldness to be one step lighter or heavier than its parent element’s boldness.100–900: Numeric boldness values that provide finer grained control than the above keywords, if needed.
text-transform: Allows you to set your font to be transformed. Values include:none: Prevents any transformation.uppercase: Transforms all text to capitals.lowercase: Transforms all text to lower case.capitalize: Transforms all words to have the first letter capitalized.full-width: Transforms all glyphs to be written inside a fixed-width square, similar to a monospace font, allowing aligning of e.g. Latin characters along with Asian language glyphs (like Chinese, Japanese, Korean).
text-decoration: Sets/unsets text decorations on fonts (you’ll mainly use this to unset the default underline on links when styling them.) Available values are:none: Unsets any text decorations already present.underline: Underlines the text.overline: Gives the text an overline.line-through: Puts astrikethrough over the text.
text-decorationcan accept multiple values at once, if you want to add multiple decorations simultaneously, for exampletext-decoration: underline overline. Also note thattext-decorationis a shorthand property fortext-decoration-line,text-decoration-style, andtext-decoration-color. You can use combinations of these property values to create interesting effects, for exampletext-decoration: line-through red wavy.
Let’s look at adding a couple of these properties to our example:
Our new result is like so:
html {
font-size: 10px;
}
h2 {
font-size: 5rem;
text-transform: capitalize;
}
h2 + p {
font-weight: bold;
}
p {
font-size: 1.5rem;
color: red;
font-family: Helvetica, Arial, sans-serif;
}Text drop shadows
You can apply drop shadows to your text using the text-shadow property. This takes up to four values, as shown in the example below:
text-shadow: 4px 4px 5px red;The four properties are as follows:
- The horizontal offset of the shadow from the original text — this can take most available CSS length and size units, but you’ll most commonly use
px; positive values move the shadow right, and negative values left. This value has to be included. - The vertical offset of the shadow from the original text; behaves basically just like the horizontal offset, except that it moves the shadow up/down, not left/right. This value has to be included.
- The blur radius — a higher value means the shadow is dispersed more widely. If this value is not included, it defaults to 0, which means no blur. This can take most available CSS length and size units.
- The base color of the shadow, which can take any CSS color unit. If not included, it defaults to
black.
Multiple shadows
You can apply multiple shadows to the same text by including multiple shadow values separated by commas, for example:
text-shadow: 1px 1px 1px red,
2px 2px 1px red;If we applied this to the <h2> element in our Tommy the cat example, we’d end up with this:
With basic font properties out the way, let’s now have a look at properties we can use to affect text layout.
Text alignment
The text-align property is used to control how text is aligned within its containing content box. The available values are as follows, and work in pretty much the same way as they do in a regular word processor application:
left: Left-justifies the text.right: Right-justifies the text.center: Centers the text.justify: Makes the text spread out, varying the gaps in between the words so that all lines of text are the same width. You need to use this carefully — it can look terrible, especially when applied to a paragraph with lots of long words in it. If you are going to use this, you should also think about using something else along with it, such ashyphens, to break some of the longer words across lines.
If we applied text-align: center; to the <h2> in our example, we’d end up with this:
Line height
The line-height property sets the height of each line of text — this can take most length and size units, but can also take a unitless value, which acts as a multiplier and is generally considered the best option — the font-size is multiplied to get the line-height. Body text generally looks nicer and is easier to read when the lines are spaced apart; the recommended line height is around 1.5 – 2 (double spaced.) So to set our lines of text to 1.6 times the height of the font, you’d use this:
line-height: 1.6;Applying this to the <p> elements in our example would give us this result:
Letter and word spacing
The letter-spacing and word-spacing properties allow you to set the spacing between letters and words in your text. You won’t use these very often, but might find a use for them to get a certain look, or to improve the legibility of a particularly dense font. They can take most length and size units.
So as an example, we could apply some word- and letter-spacing to the first line of each <p> element in our example:
p::first-line {
letter-spacing: 4px;
word-spacing: 4px;
}Let’s add some to our example, like so:
Other properties worth looking at
The above properties give you an idea of how to start styling text on a webpage, but there are many more properties you could use. We just wanted to cover the most important ones here. Once you’ve become used to using the above, you should also explore the following:
Font styles:
Text layout styles:
text-indent: Specify how much horizontal space should be left before the beginning of the first line of the text content.text-overflow: Define how overflowed content that is not displayed is signaled to users.white-space: Define how whitespace and associated line breaks inside the element are handled.word-break: Specify whether to break lines within words.direction: Define the text direction (This depends on the language and usually it’s better to let HTML handle that part as it is tied to the text content.)hyphens: Switch on and off hyphenation for supported languages.line-break: Relax or strengthen line breaking for Asian languages.text-align-last: Define how the last line of a block or a line, right before a forced line break, is aligned.text-orientation: Define the orientation of the text in a line.overflow-wrap: Specify whether or not the browser may break lines within words in order to prevent overflow.writing-mode: Define whether lines of text are laid out horizontally or vertically and the direction in which subsequent lines flow.
Many font properties can also be set through the shorthand property font. These are written in the following order: font-style, font-variant, font-weight, font-stretch, font-size, line-height, and font-family.
Among all those properties, only font-size and font-family are required when using the font shorthand property.
A forward slash has to be put in between the font-size and line-height properties.
A full example would look like this:
font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;In this active learning session, we don’t have any specific exercises for you to do: we’d just like you to have a good play with some font/text layout properties, and see what you can produce! You can either do this using offline HTML/CSS files, or enter your code into the live editable example below.
If you make a mistake, you can always reset it using the Reset button.
You’ve reached the end of this article, and already did some skill testing in our Active Learning section, but can you remember the most important information going forward? You can find an assessment to verify that you’ve retained this information at the end of the module — see Typesetting a community school homepage.
This assessment tests all the knowledge discussed in this module, so you might want to read the other articles before moving on to it.
We hoped you enjoyed playing with text in this article! The next article will give you all you need to know about styling HTML lists.
Свойство font-size-adjust — контроль размера шрифта
Свойство font-size-adjust позволяет контролировать размер шрифта, при неизменном font-size (увеличивать или уменьшать).
Применение: пусть в font-family задано два шрифта через запятую, например, Georgia, «Times New Roman». Пусть на компьютере пользователя нет шрифта Georgia — в этом случае применится «Times New Roman». Однако, нас ждет проблема — при одинаковом значении font-size шрифты будут выглядеть по-разному. В примере ниже обоим абзацам задан font-size в 16px, но разные font-family. Посмотрите, как отличаются размеры:
<p>
Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet.
</p>
:
Это происходит из-за того, что отображаемый размер шрифта зависит в большей степени не от свойства font-size, которое определяет лишь общий размер шрифта, а от соотношения значений свойства font-size и величины x-height (x-height — это разница между размером строчной буквы «x» и прописной буквы «X» для определенного шрифта).
Это соотношение называется аспектом шрифта и рассчитывается по формуле: аспект = font-size / x-height.
Проблему размеров решает свойство font-size-adjust (оно позволяет менять аспект шрифта), которое заставит выглядеть второй шрифт такого же размера, как и первый.
Давайте сделаем так, чтобы шрифт Times New Roman был такого же размера, как и Georgia. Нам известен аспект Georgia — это 0.5 (см. таблицу ниже).
Установим font-size-adjust для текста с Times New Roman в значение 0.5 и увидим, что второй текст стал такого же размера, как и первый:
<p>
Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet.
</p>
:
Синтаксис
селектор {
font-size-adjust: число | none;
}
Значения
| Значение | Описание |
|---|---|
| Число | Число задает аспект шрифта. |
| none | Нет регулировки размера шрифта. |
Значение по умолчанию: none.
Как определить значение аспекта для шрифта?
Посмотрите отрывок из спецификации W3C: Коэффициент пропорциональности (аспект) для выбранных шрифтов может быть высчитан путем сравнения одного и того же текста, но с разным значением font-size-adjust. Если значение свойства font-size-adjust подобрано верно, то при одинаковом размере шрифта текст останется неизменным для всех используемых на странице шрифтов.
Привожу известные мне значения аспекта для некоторых шрифтов: Georgia — 0.5, Times New Roman — 0.46, Verdana — 0.58.
Пример
Сравните как выглядит текст с разным значением font-size-adjust и одинаковом font-size и font-family:
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
:
Пример . Применение в реальной жизни
Код ниже делает так, чтобы в случае отсутствия на компьютере у пользователя шрифта Georgia, применившийся шрифт Times New Roman был такого же размера, как и Georgia:
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
aenean a dapibus magna, ac interdum nisl suspendisse egetile.
</p> p {
font-size: 16px;
font-family: Georgia, "Times New Roman";
font-size-adjust: 0.5;
}
:
Как Изменить Размер Шрифта в WordPress
WordPress
access_time13 марта, 2020
hourglass_empty3мин. чтения
Изменить размер шрифта в WordPress на самом деле очень просто. В этой статье мы покажем вам, как это сделать.
Мы рассмотрим два метода — через плагин и с помощью CSS.
WordPress известен своим удобным редактором записей. Как и ваше любимое программное обеспечение обработки текстов, WordPress предлагает множество опций. Вы можете легко редактировать контент, например, добавлять разные типы заголовков и абзацы через удобное выпадающее меню.
Обратите внимание, что структура вашего контента важна как для посетителей, так и для SEO. Хорошо структурированные заголовки помогают поисковым системам быстрее понять основную тему вашей публикации. Как результат, вы поднимитесь выше на странице поисковой выдачи.
В последней версии WordPress доступен новый редактор Gutenberg. Мы также покажем вам, как изменить размер шрифта с помощью этого инструмента.
Пробуем Изменить Размер Шрифта с Помощью Плагина TinyMCE Advanced
TinyMCE Advanced — бесплатный плагин, который позволяет легко выбрать нужный размер шрифта. Этот плагин создаёт классическую панель инструментов в новом редакторе Gutenberg.
Сначала необходимо установить и активировать плагин. Затем вы можете перейти на страницу настроек (найдите плагин TinyMCE Advanced в разделе “Настройки” и кликните по названию). Там вы найдёте две вкладки: Редактор блоков (Gutenberg) и Классический редактор (TinyMCE). Кстати плагин переведён на русский, так что знания английского вам не понадобятся, по крайней мере для работы в визуальном редакторе.
Если вы хотите использовать только классический редактор, пролистайте страницу настроек плагина немного вниз, найдите и установите флажок возле опции “Заменить редактор блоков на классический редактор”. Чтобы использовать оба редактора, убедитесь, что эта опция осталась без галочки.
Вот, как мы можем изменить шрифт, используя этот плагин:
- Перейдите в раздел Записи -> Добавить новую или к редактированию существующей записи. Вы увидите классический редактор или редактор блоков, в зависимости от того, что вы выбрали для работы. Мы используем классический вариант.
- Выделите строки текста, которые вы хотите изменить, затем выберите размер шрифта.
- Вот, что у нас получилось.
Используем CSS — Классический Путь
В то время как метод описанный выше отлично подойдёт начинающим, классический способ требует знаний CSS и может оказаться немного сложнее.
Когда вы используете плагин или редактор WordPress по умолчанию, вам нужно вносить изменения в каждую публикацию или страницу отдельно. CSS изменяет размер шрифта на всём сайте.
Чтобы изменить размер шрифта WordPress с помощью CSS, нужно добавить несколько строк кода. Вы можете сделать это через редактор или Customizer (настройщик). Мы рекомендуем использовать Customizer, так как это удобнее.
- Перейдите в Консоль WordPress, затем выберите Внешний вид -> Настроить.
- Выберите Добавить CSS.
Добавить код можно в поле слева.
- Чтобы изменить весь шрифт:
body { font-size: 1.25rem; } - Чтобы изменить шрифт абзаца:
p { font-size: 25px; } - Чтобы изменить шрифты определённых заголовков:
h3 { font-size: 2.5em; } - Чтобы изменить размер шрифта в боковом меню WordPress:
.sidebar li { font-size: 12px; } - Чтобы изменить размер шрифта в футере:
.footer { font-size: 150%; } - Чтобы изменить шрифт для определенного размера экрана:
html { font-size: 18px; } @media (min-width: 900px) { html { font-size: 20px; } }
CSS-стили позволяют измерять размер текста в четырёх разных единицах:
- Эм (em) — единица, используемая в веб-документах. 1em равняется размеру используемого на странице шрифта, например, если размер шрифта 12pt, то 1em равно 12pt.
- Пиксели (px) — единица измерения, используемая на экране. Один пиксель равняется одной точке на экране компьютера.
- Пункты (pt) — единица измерения позаимствована из традиционных печатных изданий. 1 пункт равен 1/72 дюйма.
- Проценты (%). Значение по умолчанию — 100%, меняется при увеличении или уменьшении.
Как Изменить Размер Шрифта в Редакторе Gutenberg
Как упоминалось ранее, Gutenberg является новым дополнением WordPress. Он был добавлен в CMS, чтобы упростить редактирование записей с медиафайлами.
Вот как выглядит блок:
- Выберите запись, которую вы хотите отредактировать, или просто нажмите на “Добавить новую”.
- Нажмите на блок, содержащий текст, которые вы хотите изменить, затем выберите номер вручную.
- Или же выберите один из доступных параметров справа: маленький, нормальный, средний, большой и огромный.
Очень удобно, не правда ли?
Выводы
WordPress предлагает много опций настройки, в том числе настройку шрифтов. Вы можете изменить размер шрифта в меню редактора WordPress, установив специальный плагин, или через CSS вручную. Оба способа мы описали в этом руководстве.
Выберите свой идеальный размер шрифта, чтобы сделать ваш контент более привлекательным и удобным для чтения. Это очень просто.
SVG. Работаем с текстом
Выводим текст
Текст задаётся с помощью тега text. Основные атрибуты — x и y. Нужно не забывать указывать базовую линию для текста, за которую отвечает атрибут y. Если её не указать, то по умолчанию она окажется в точке с координатой 0, и текст станет невидимым, так как он рисуется над базовой линией. Значение атрибута должно быть больше размера шрифта. Размер viewBox также должно быть по крайней мере равен размеру атрибута. Атрибут font-sizeзадаёт размер шрифта в пикселях относительно viewBox. Текст при этом адаптируется к размерам страницы. Также доступны и другие атрибуты.
Текст из SVG можно выделять и копировать. Текст, помещаемый в SVG-документ, индексируется поисковыми системами.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 80">
<text y="50" font-size="32" font-weight="bold"
font-family="Avenir, Helvetica, sans-serif">
Этот кот в SVG
</text>
</svg>
Нужно следить за размерами viewBox, чтобы длинный текст уместился в контейнере.
Как и в HTML, лишние пробелы игнорируются.
Чтобы сдвинуть текст по горизонтали, можно использовать атрибут x в text. Если атрибут не указан, то используется значение по умолчанию 0.
Атрибуты
- direction — Направление текста. В некоторых языках (например, в арабском) принято писать текст справа налево. Для задания написания справа налево необходимо дополнительно включать атрибут unicode-bidi. Возможные значения: rtl | ltr (по умолчанию)
- dominant-baseline — Выравнивание текста относительно горизонтальной линии. Возможные значения: auto (по умолчанию) | hanging | mathematical
- fill — Цвет текста. Поддерживаются именованные значения, а также RGB-код в десятичной и шестнадцатеричной формах. Значение по умолчанию — black
- font-family — Шрифт текста. Все шрифты, доступные на компьютере. При отсутствии заданного шрифта будет использован подобный (например, при отсутствии шрифта Arial будет использован Arial Bold). Значение по умолчанию — Arial
- font-size — Размер шрифта. Значение по умолчанию 12 пт.
- font-size-adjust — Значение по умолчанию — none
- font-stretch — Сжатие и растяжение текста. Возможные значения: normal (по умолчанию) | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
- font-style — Начертание текста. Возможные значения: normal (по умолчанию) | italic | oblique
- font-weight — Вес шрифта. От 100 до 900 — Эти значения формируют упорядоченную последовательность, где каждый номер обозначает вес, который темнее своего предшественника. normal — то же, что «400». bold — то же, что «700». bolder — Определяет вес шрифта, более темный, чем наследуемый. Если такого веса нет, результатом будет более «темное» числовое значение (а шрифт не изменяется), если только наследуемое значение не «900», в этом случае результат будет также «900». lighter — Определяет вес шрифта, назначаемый шрифту, который светлее, чем наследуемый. Если такого веса нет, результатом будет более «светлое» числовое значение (а шрифт не изменяется), если только наследуемое значение не «100», в этом случае результат будет также «100». Возможные значения: normal (по умолчанию) | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
- glyph-orientation-horizontal — Горизонтальная ориентация символов. Возможен выбор из фиксированного диапазона значений угла. Возможные значения: 0 | 90 | 180 | 270 (и значения со знаком минус). По умолчанию — auto или 0
- glyph-orientation-vertical — Вертикальная ориентация символов. Возможен выбор из фиксированного диапазона значений угла. Возможные значения: 0 | 90 | 180 | 270 (И значения со знаком минус). По умолчанию — auto или 0
- kerning — Интервал между буквами. Возможные значения: auto (по умолчанию) | число
- letter-spacing — Интервал между буквами. Возможные значения: normal | число
- text-anchor — Выравнивание текста относительно начала строки. Возможные значения: start (по умолчанию), middle, end
- text-decoration — Подчеркивание, надчеркивание, перечеркивание текста. Возможные значения: none (по умолчанию) | underline | overline | line-through
- unicode-bidi — Для работы атрибута direction со значением ltr необходимо наличие в коде свойства unicode-bidi со значением embed или override. Возможные значения: normal (по умолчанию) | embed | bidi-override
- word-spacing — Интервал между словами. Возможные значения: normal (по умолчанию) | число
- writing-mode — Устанавливает расположение текстового фрагмента как единого целого относительно исходной точки. Возможные значения, например, слева направо — сверху вниз ( left to right top to bottom ) не изменяют порядок самих букв в словах. Возможные значения: lr-tb (по умолчанию) | rl-tb | tb-rl | lr | rl | tb
- x — Абсцисса верхней левой точки текстового блока. Значение по умолчанию: 0
- y — Ордината верхней левой точки текстового блока. Значение по умолчанию: 0
Стилизация
Текст может быть стилизован с помощью свойств CSS, таких как font-weight, font-style, text-decoration, text-transform и т.д.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
<text x="0" y="15">Подчеркнутый кот средствами SVG</text>
</svg>
Частичная стилизация через <tspan>
Если нужно применить стили или атрибуты только для определенной части, то можно использовать элемент <tspan> к разным частям текста в строке.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
<text x="0" y="15">
<tspan>Жирный кот</tspan>,
<tspan>наклонный кот</tspan> и <tspan>подчеркнутый кот</tspan>.</text>
</svg>
Цвет
Цвет текста задаётся через свойство fill.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 52">
<text y="50" font-size="40" font-weight="bold" font-family="Avenir, Helvetica, sans-serif" fill="red">Цветной кот</text>
</svg>
Режим вывода текста
Японская письменность использует режим сверху вниз. Этот режим можно включить через атрибут writing-mode со значением tb (top-to-bottom). Я не знаю японских иероглифов, поэтому вставлю русские символы.
<svg xmlns="http://www.w3.org/2000/svg">
<text x="70" y="20">Неко - японский кот</text>
</svg>
Добавление текста в заголовок страницы
Можно сделать красивый заголовок на странице, используя CSS:
header {
width: 80%;
margin: 0 auto;
}
svg text {
font-family: sans-serif;
text-transform: uppercase;
font-weight: 900;
font-size: 90px;
fill: blue;
}
<header>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 285 80">
<text x="0" y="66">Hawaii</text>
</svg>
</header>
Посмотреть демо.
SVG будет автоматически подстраиваться под размеры контейнера.
SVG может использовать любой шрифт, встроенный в страницу или из CSS. Текст доступен для поисковых роботов.
SVG-текст можно сделать ссылкой.
<header>
<img src="waves.svg" alt="Waves">
</header>
Но в этом случае вы не сможете использовать встроенный шрифт. Текст будет доступен для поисковых систем, но его нельзя скопировать.
Обводка текста
Обводка для текста делается похожим образом, как в CSS, только вместо указания цвета для текста нужно использовать свойство fill. Если цвет не указан, то используется чёрный цвет.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 80">
<text y="50" fill="#c96"
font-size="32px"
font-family="Futura Condensed ExtraBold, Arial Black, sans-serif"
stroke="yellow" stroke-width="2px">Обведи кота вокруг пальца</text>
</svg>
Присвоим атрибуту fill значение none, чтобы оставить только обводку.
Обведи кота вокруг пальцаПри желании можно вынести код в стили.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 80">
<defs>
<style>
text {
fill: #c96; font-size:32px;
font-family: Futura Condensed ExtraBold, Arial Black, sans-serif;
stroke: yellow; stroke-width: 2px;
}
</style>
</defs>
<text y="50">Обведи кота вокруг пальца</text>
</svg>
Градиент
Текст можно сделать градиентным. Задаём цвета градиента при помощи linearGradient и присваиваем ему идентификатор. Связываем идентификатор с свойством fill.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient x1="0%" x2="0%" y1="0%" y2="100%">
<stop stop-color = "#ddd" offset = "0%"/>
<stop stop-color = "#FF00ee" offset = "100%"/>
</linearGradient>
</defs>
<text x="0" y="40" font-size="42" font-weight="bold" fill="url(#textgradient)" stroke="none">Градиентный кот</text>
</svg>
Текст вдоль кривой линии
Текст можно выводить не только строго вдоль вертикальной линии, но и вдоль замысловатой кривой.
Для начала нужно создать траекторию path в элементе defs. Элементу path добавляем атрибут id, чтобы связать текст в элементе textPath через xlink:href:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<path fill="none" stroke="#000000"
d="M0.057,0.024c0,0,10.99,51.603,102.248,51.603c91.259,0,136.172,53.992,136.172,53.992"/>
</defs>
<use xlink:href="#textpath"/>
<text x="10" y="100" font-size="24">
<textPath xlink:href="#textpath">
Кот вдоль кривой
</textPath>
</text>
</svg>
Пример размещения текста вдоль окружности вынесен в отдельную статью.
Вернуться в раздел SVG
Реклама
CSS Размер шрифта
Размер шрифта
Свойство font-size устанавливает размер текста.
Возможность управлять размером текста очень важна в веб-дизайне. Однако вы не следует использовать настройки размера шрифта, чтобы абзацы выглядели как заголовки, или заголовки выглядят как абзацы.
Всегда используйте правильные теги HTML, например
—
для заголовков и
для абзацы.
Значение размера шрифта может быть абсолютный или относительный размер.
Абсолютный размер:
- Устанавливает указанный размер текста
- Не позволяет пользователю изменять размер текста во всех браузерах (плохо по причинам доступности)
- Абсолютный размер полезен, когда известен физический размер вывода.
Относительный размер:
- Устанавливает размер относительно окружающих элементов
- Позволяет пользователю изменять размер текста в браузерах
Примечание: Если вы не укажете размер шрифта, размер по умолчанию для обычного текста, такого как абзацы, составляет 16 пикселей (16 пикселей = 1 em).
Установить размер шрифта с пикселями
Установка размера текста в пикселях дает вам полный контроль над размером текста:
Пример
h2 {размер шрифта: 40 пикселей;
}
h3 {
font-size: 30px;
}
p {
font-size: 14px;
}
Совет: Если вы используете пиксели, вы все равно можете использовать инструмент масштабирования для изменения размера всей страницы.
Установить размер шрифта с помощью Em
Чтобы пользователи могли изменять размер текста (в меню браузера), многие разработчики используют em вместо пикселей.
1em равно текущему размеру шрифта. Размер текста по умолчанию в браузерах: 16 пикселей. Итак, размер 1em по умолчанию составляет 16 пикселей.
Размер может быть рассчитан от пикселей до em по следующей формуле: пикселей /16 = em
Пример
h2 {font-size: 2,5em; / * 40px / 16 = 2.5em * /
}
h3 {
font-size: 1.875em; / * 30 пикселей / 16 = 1,875 em * /
}
p {
font-size: 0,875em; / * 14px / 16 = 0.875em * /
}
В приведенном выше примере размер текста в em такой же, как в предыдущем примере. в пикселях.Однако с размером em можно настроить размер текста. во всех браузерах.
К сожалению, проблема со старыми версиями все еще не устранена. Internet Explorer. Текст становится больше, чем должен когда он сделан больше, и меньше, чем должен, когда сделан меньше.
Используйте комбинацию процентов и Em
Решение, которое работает во всех браузерах, — установить размер шрифта по умолчанию в процент для элемента
:Пример
body {font-size: 100%;
}
h2 {
font-size: 2.5em;
}
h3 {
font-size: 1,875em;
}
p {
font-size: 0,875em;
}
Теперь наш код отлично работает! Он показывает тот же размер текста в все браузеры, и позволяет всем браузерам увеличивать или изменять размер текста!
Размер адаптивного шрифта
Размер текста можно установить с помощью единицы vw , что означает «ширину области просмотра».
Таким образом, размер текста будет соответствовать размеру окна браузера:
Измените размер окна браузера, чтобы увидеть, как масштабируется размер шрифта.
Viewport — это размер окна браузера. 1vw = 1% ширины области просмотра. Если ширина области просмотра 50 см, 1vw составляет 0,5 см.
Коды и теги размера шрифта HTML
size = " font size " > …
Прежде всего, вы можете указать размер текста на своей веб-странице с помощью атрибута size в коде элемента HTML font .Если размер текста на веб-странице не определен, веб-браузер будет отображать текст с размером 3.
Значение, которое вы вводите для атрибута size , представляет собой число, представляющее любой из семи различных относительных размеров. Эти цифры от 1 до 7 соответственно. Вот результаты, которые вы получите, указав атрибут size :
This is Size 1.This is Size 2.
This is Size 3.
This is Size 4.
This is Size 5.
Это размер 6.
Это размер 7.
Чтобы применить выбранный размер шрифта, просто введите пару атрибут-значение:
size = " размер шрифта " ... в тег , где размер шрифта равно любому числу от 1 до 7.Пример:
size = "4" > Ваш видимый текст идет сюда и будет выглядеть вот так. Альтернативы
Другой способ обозначить размер текста — ввести число от 1 до 4, которое либо прибавляет, либо вычитает из вашего
базового шрифта размер .В отсутствие декларации basefont по умолчанию basefont имеет размер 3. Вводя значение «+1» для атрибута size , вы указываете, что ваш текст будет отображаться на один размер больше, что приравнивается к размеру 4. . Точно так же значение «+2» соответствует размеру шрифта 5. В другом направлении значение «-1» соответствует размеру 2, а «-2» соответствует размеру 1 (размер основного шрифта 3 — 2 = размер шрифта. 1). Многие редакторы WSYIWYG создают исходный код, используя эту систему изменения размера шрифта.Это должно помочь объяснить вещи, если вы когда-либо решили взглянуть на исходный код при использовании редактора WYSIWYG и впоследствии задались вопросом, о чем были все эти «+2» и «-1». Еще один способ определения размера текста на веб-странице — использовать элементы стиля шрифта big и small . Эта система работает очень похоже на систему size = ± 1 в том, что использование одного набора тегов ... соответствует на один размер больше при использовании одного набора из ... тегов соответствует на один размер меньше.
Следовательно, если вы начинаете с пустой веб-страницы без применения форматирования (размер основного шрифта по умолчанию 3), следующие три примера дадут идентичные результаты:
size = "4" > То же, что и он когда-либо было … size = "+ 1" > Как всегда … Как всегда ... Вложение пары тегов ... один в другой и использование этого для форматирования текста имеет тот же эффект, что и визуализация текста на два размера больше или, по сути, , используя пару size = "+ 2" значение атрибута с элементом font .
Следовательно, следующие три примера дадут идентичные результаты:
size = "5" > Тройка снова и снова. size = "+ 2 "> Тройка снова и снова. Тройка снова и снова. Многие редакторы WYSIWYG также используют эту систему изменения размера шрифта
большой / маленький . Это один из недостатков использования этих программ веб-разработки «мгновенного пирога». Иногда они могут создавать очень раздутый и беспорядочный исходный код. Используя одну из этих программ, когда пользователь выделяет текст, который он хочет сделать действительно большим, а затем четыре раза нажимает кнопку make-text-large (довольно часто обозначается кнопкой a + в пользовательском интерфейсе), в результате исходный код будет выглядеть так: Ваш действительно большой текст. Это сделать намного проще, если просто указать:
Ваш действительно большой текст. Еще более нелепый сценарий создается, когда пользователь WYSIWYG выделяет текст, который он хотел бы увеличить, а затем, например, трижды нажимает кнопку увеличить текст , но затем меняет он думает и решает, что какой-то ранее набранный текст будет лучше в исходном размере.Затем — часто не осознавая, что он действительно создает за кулисами в исходном коде — он возвращается, выделяет этот текст и трижды нажимает кнопку make-text-less , создавая связку исходного кода, пустая трата места:
Размер не будет применяться к этому тексту .. ... в то время как этот текст будет иметь размер 6. Это в точности то же самое, что просто ввести:
Размер не будет применяться к этому тексту ... ... в то время как этот текст будет отображаться с размером 6. После того, как вы попытались отладить веб-страницу, набитую до жабры бесполезным исходным кодом такого рода, как и т.д. Редакторы WYSIWYG действительно такие.
Итак, какой размер текста следует использовать? Отчасти это вопрос вкуса, отчасти вопрос необходимости, а также может зависеть от того, какой стиль шрифта вы используете.
Слишком мелкий текст может быть трудно, а иногда даже невозможно прочитать (Arial size = «1»).
С другой стороны, слишком большой текст может вызвать эффект «крика». Это может отвратить посетителей от вашей веб-страницы, особенно если вся страница заполнена таким текстом (Arial size = «6»).
Большинство авторов веб-страниц обычно используют диапазон размера 3–5 для нормального чтения (в зависимости от стиля шрифта), но могут увеличивать размер шрифта для заголовков и заголовков.
Теперь перейдем к изучению того, как установить стиль шрифта на своей веб-странице …
См. Также:
HTML | размер Атрибут
HTML | Атрибут размера
Атрибут HTML size используется для указания размера текста, который присутствует внутри элемента .
Синтаксис:
Значения атрибута: Он содержит одно значение число , которое определяет размер текста.Размер шрифта составляет от 1 до 7. Значение размера шрифта по умолчанию — 3.
Примечание: Атрибут размера не поддерживается HTML 5.
Пример:
|
Выход:
Поддерживаемые браузеры: Браузеры, поддерживаемые атрибутом HTML size , перечислены ниже:
- Google Chrome
- Internet Explorer
- Firefox
- Safari
- Opera
Как изменить размер шрифта в HTML и CSS
Изменение размера шрифта или текста веб-сайта действительно должно выполняться с помощью CSS, поскольку тег html устарел / больше не используется в новой версии HTML (HTML5).Использование «шрифта» в качестве фактического элемента HTML - это то, как интерфейсные веб-разработчики использовали это в старой школе, на заре Интернета. Я уверен, что существует множество устаревших веб-сайтов и приложений, которые все еще придерживаются этого старого использования, но использование тега «font» больше не рекомендуется.
Это был старый способ изменения размера текста с помощью тега FONT:
Здравствуйте, измените размер, я немного текста!
Это новый способ изменения размера текста:
Прежде всего, используйте CSS.
Есть несколько способов изменить размер текста с помощью CSS -
Используйте встроенный CSS и добавьте его прямо в HTML своей веб-страницы. Если вам нужно использовать встроенный CSS (это следует использовать с осторожностью!), Его следует разместить внутри встроенного элемента (в отличие от блочного элемента html, такого как тег «div»). В качестве встроенных элементов могут быть, например, теги или . Встроенный код для уменьшения размера небольшого фрагмента текста по сравнению с обычным выглядит следующим образом:
Ваш текст здесь
Вот как приведенный выше код будет отображаться в браузере: Ваш текст здесь
Хорошо - теперь более правильный способ: вы можете добавить свой CSS в файл таблицы стилей, который отделен от вашей реальной веб-страницы.В этом случае вы должны добавить свойство CSS «font-size» в код стиля для любого элемента HTML, который вы стилизуете, например:
div p {
font-size: 12px;
}
Приведенный выше код будет стилизовать любые элементы абзаца («p»), которые находятся внутри тега Среди них: Теги: свойство размера шрифта как изменить размер шрифта в html и cssinline css Прежде всего, вы можете указать размер текста на своей веб-странице с помощью атрибута size в коде элемента HTML Значение, которое вы вводите для атрибута Это размер 2. Это размер 3. Это размер 4. Это размер 5. Это размер 6. Это размер 7. Пример: Еще один способ определения размера текста на веб-странице - использовать элементы стиля шрифта Следовательно, если вы начинаете с пустой веб-страницы без применения форматирования (размер основного шрифта по умолчанию 3), следующие три примера дадут идентичные результаты: Вложение пары тегов Следовательно, следующие три примера дадут идентичные результаты: Еще более нелепый сценарий создается, когда пользователь WYSIWYG выделяет текст, который он хотел бы увеличить, а затем, например, трижды нажимает кнопку увеличить текст , но затем меняет он думает и решает, что какой-то ранее набранный текст будет лучше в исходном размере. Затем - часто не подозревая о том, что он действительно создает за кулисами в исходном коде - он возвращается, выделяет этот текст и трижды нажимает кнопку make-text-less , создавая кучу исходного кода, представляющего собой полный пустая трата места: После того, как вы попытались отладить веб-страницу, набитую до жабры бесполезным исходным кодом такого рода, как Итак, какой размер текста следует использовать? Отчасти это вопрос вкуса, отчасти вопрос необходимости, а также может зависеть от того, какой стиль шрифта вы используете. Слишком мелкий текст может быть трудно, а иногда даже невозможно прочитать (Arial size = "1"). С другой стороны, слишком большой текст может вызвать эффект «крика». Это может отвратить посетителей от вашей веб-страницы, особенно если вся страница заполнена таким текстом (Arial size = "6"). Большинство авторов веб-страниц обычно используют диапазон размера 3–5 для нормального чтения (в зависимости от стиля шрифта), но могут увеличивать размер шрифта для заголовков и заголовков. Теперь перейдем к изучению того, как установить стиль шрифта на своей веб-странице ... См. Также: В HTML мы можем изменить размер любого текста следующими способами: Если мы хотим изменить размер текста с помощью тега Html, который должен отображаться на веб-странице, мы должны выполнить шаги, указанные ниже. Используя эти шаги, мы можем легко изменить размер любого текста: Шаг 1: Во-первых, мы должны ввести код Html в любом текстовом редакторе или открыть существующий файл Html в текстовом редакторе, в котором мы хотим использовать тег Html для изменения размера шрифта. <Голова> <Название> Изменить размер текста с помощью тега HTML <Тело> JavaTpoint Есть разные способы выразить значение вашего размера шрифта
Для получения дополнительной информации об использовании различных значений размера шрифта в CSS-Tricks есть отличная статья, которую вы, возможно, захотите почитать.
Поделитесь, если вы нашли эту статью полезной, и дайте мне знать в комментариях, если у вас есть какие-либо вопросы по CSS или HTML! Коды и теги размера шрифта HTML
size = " font size " > ... font . Если размер текста на веб-странице не определен, веб-браузер будет отображать текст с размером 3. size , представляет собой число, представляющее любой из семи различных относительных размеров. Эти цифры от 1 до 7 соответственно. Вот результаты, которые вы получите при указании атрибута size : This is Size 1.
Чтобы применить выбранный размер шрифта, просто введите пару атрибут-значение:
... в тег size = " размер шрифта " , где размер шрифта равно любому числу от 1 до 7.
size = "4" > Ваш видимый текст идет сюда и будет выглядеть так. Альтернативы
Другой способ обозначить размер текста - ввести число от 1 до 4, которое либо прибавляет, либо вычитает из вашего базового шрифта размер . В отсутствие объявления basefont по умолчанию basefont имеет размер 3. Вводя значение «+1» для атрибута size , вы указываете, что ваш текст будет отображаться на один размер больше, что приравнивается к размеру 4. Аналогично, значение «+2» соответствует размеру шрифта 5.В другом направлении значение «-1» соответствует размеру 2, а «-2» соответствует размеру 1 (размер основного шрифта 3 - 2 = размер шрифта 1). Многие редакторы WSYIWYG создают исходный код, используя эту систему изменения размера шрифта. Это должно помочь объяснить вещи, если вы когда-либо решили взглянуть на исходный код при использовании редактора WYSIWYG и впоследствии задались вопросом, о чем были все эти «+2» и «-1». big и small .Эта система работает очень похоже на систему size = ± 1 в том, что использование одного набора тегов ... соответствует на один размер больше при использовании одного набора из ... тегов означает на один размер меньше.
size = "4" > То же, что и он когда-либо был...
size = "+ 1" > Как всегда ...
Как всегда ... ... один в другой и использование этого для форматирования текста имеет тот же эффект, что и визуализация текста на два размера больше или, по сути, использование пара size = "+ 2" значение атрибута с элементом font .
size = "5" > Тройка снова и снова.
size = "+ 2" > Снова тройка.
Снова тройка .
Многие редакторы WYSIWYG также используют эту систему изменения размера шрифта большой / маленький . Это один из недостатков использования этих программ веб-разработки «мгновенного пирога». Иногда они могут создавать очень раздутый и беспорядочный исходный код.Используя одну из этих программ, когда пользователь выделяет текст, который он хочет сделать действительно большим, а затем четыре раза нажимает кнопку make-text-large (довольно часто обозначается кнопкой a + в пользовательском интерфейсе), в результате исходный код будет выглядеть так:
Ваш действительно большой текст.
Это сделать намного проще, если просто указать:
Ваш действительно большой текст.
К этому тексту размеры не применяются.. ... пока этот текст будет иметь размер 6.
Это в точности то же самое, что просто ввести:
Размер не будет применяться к этому тексту ... ... в то время как этот текст будет отображаться с размером 6. и т.д. Редакторы WYSIWYG действительно такие. Как изменить размер шрифта в Html
Использование тега HTML
Примечание. HTML 5 не поддерживает атрибут Size шрифта, поэтому мы должны использовать атрибут встроенного стиля и внутренние параметры CSS для изменения размера текста.
Учебное пособие по HTML
Как изменить размер шрифта в HTML