Html размер шрифта: Размер текста | htmlbook.ru — Вебджем.рф

Содержание

CSS/Свойство font-size

Синтаксис

CSS 1

CSS 2‒2.2

CSS 3

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

Описание

Свойство font-size устанавливает размер шрифта.

Применяется:	ко всем элементам;
Наследование:	отсутствует;
Проценты:	относительно унаследованного размера шрифта;
Медиа:	визуальные.

Условия использования

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

JavaScript

[объект].style.fontSize="[значение]";

Поддержка браузерами

Chrome

Поддерж.

Firefox

Поддерж.

Opera

Поддерж.

Maxthon

Поддерж.

IExplorer

Поддерж.

Safari

Поддерж.

iOS

Поддерж.

Android

Поддерж.

Спецификация

CSS	Раздел
1	5.2.6 ‘font-size’	Перевод
2	15.2.4 Font size: the ‘font-size’ and ‘font-size-adjust’ properties
2.1	15.7 Font size: the ‘font-size’ property	Перевод
2.2	15.7 Font size: the ‘font-size’ property
3	3.5 Font size: the font-size property	Перевод

Значения

<абсолютный-размер>

Указывается ключевое слово, являющееся индексом в таблице размеров шрифтов. В CSS определены следующие ключевые слова абсолютного-размера:

xx-small

Устанавливает самый мелкий размер текста. (Эквивалентен HTML размеру шрифта равному «1» или размеру шрифта h6.)

font-size: xx-small;

x-small

Устанавливает мелкий размер текста, чуть больший чем «xx-small».

font-size: x-small;

small

Устанавливает маленький размер текста. (Эквивалентен HTML размеру шрифта равному «2» или размеру шрифта h5.)

font-size: small;

medium

устанавливает средний размер текста. (Эквивалентен HTML размеру шрифта равному «3» или размеру шрифта h5.)

font-size: medium;

large

Устанавливает крупный размер текста.

(Эквивалентен HTML размеру шрифта равному «4» или размеру шрифта h4.)

font-size: large;

x-large

Устанавливает очень крупный размер текста. (Эквивалентен HTML размеру шрифта равному «5» или размеру шрифта h3.)

font-size: x-large;

xx-large

Устанавливает самый крупный размер текста. (Эквивалентен HTML размеру шрифта равному «6» или размеру шрифта h2.)

font-size: xx-large;

<относительный-размер>

Указывается ключевое слово, которое интерпретируется относительно таблицы размеров шрифта и размера шрифта родительского элемента. В CSS определены следующие ключевые слова относительного-размера:

smaller: Уменьшает размер шрифта элемента относительно размера шрифта родительского элемента.
font-size: smaller;
larger: Увеличивает размер шрифта элемента относительно размера шрифта родительского элемента.
font-size: larger;

Прочие значения

<длина>: Указывает размер шрифта в определённых единицах измерения.
font-size: 28pt;
<проценты>: Указывает размер шрифта в процентах относительно базового значения. (За базовое значение принимается значение родительского элемента равное 100%.)
font-size: 190%;
inherit: Указывает, что элемент должен унаследовать параметры родительского элемента.

Начальное значение: «medium».

Пример использования

Листинг кода

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Свойство font-size</title>
<style type=»text/css»>
.

abs { font-size: x-small; }
.em { font-size: 0.75em; }
.px { font-size: 25px; }
.in { font-size: 0.5in; }
.pt { font-size: 18.8pt; }
.pc { font-size: 0.8pc; }
.per { font-size: 59%; }
</style>
</head>
<body>
<h2>Размер шрифта</h2>
<p>Случайные размеры: <span>x-small</span> | <span>0.75em</span> | <span>25px</span> | <span>0.5in</span> | <span>18.8pt</span> | <span>0.8pc</span> | <span>59%</span>.</p>
</body>
</html>

Свойство font-size

Как изменить размер шрифта в html

HTML похож на документы MS-Word и Google, но разница в том, что HTML-документы отображают содержимое в браузере. Теперь, когда мы форматируем текст в документах MS-Word и Google, HTML также позволяет нам форматировать текст в документах HTML с помощью свойств CSS.

Итак, в этой статье мы увидим, как изменить размер шрифта в HTML:

использование пикселей
используя процент %
в зависимости от размера экрана
использование эфемерной стоимости единицы

Как изменить размер шрифта в HTML с помощью свойства font-size?

В HTML размер шрифта можно изменить с помощью свойства font-size CSS. Свойство font-size поддерживает список опций для изменения размера шрифта в соответствии с некоторыми критериями. В этом разделе описывается список возможных опций свойства font-size для изменения размера шрифта. размер шрифта в HTML.

– с использованием пикселей (px)

Мы можем изменить размер шрифта с помощью свойства CSS font-size и установить его значение в пикселях. Пиксель — это единица измерения, используемая веб-разработчиками для указания высоты, ширины, размера шрифта и т. д. 1 пиксель представляет собой 1/96 часть дюйма на экране. В следующем практическом примере показано использование этого свойства со значениями пикселей. По умолчанию размер шрифта составляет 16 пикселей.

Код:

<HTMLязык=»ан»>

<глава>
<заглавие>Первый документ</заглавие>
</глава>
<тело>
<п>Это нормальный размер шрифта в документе HTML.</п>

<пстиль=»Размер шрифта: 25px;»>
Размер шрифта изменяется на 30 пикселей с помощью свойства CSS font-size.
</п>
</тело>
</HTML>

В этом коде мы пишем два абзаца и меняем размер одного абзаца на 25 пикселей, используя свойство CSS font-size.

Выход:

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

– используя процент %

Мы также можем изменить размер шрифта, установив значение свойства CSS font-size в процентах от размера тела HTML-документа, что означает, что когда мы задаем значение в процентах, оно будет идти. Давайте посмотрим на следующий пример, чтобы лучше понять.

Код:

<HTMLязык=»ан»>
<глава>
<заглавие>Первый документ</заглавие>
</глава>
<тело>
<п>Это обычный шрифт размер в HTML-документе.</п>
<пстиль=»Размер шрифта: 150%;»>
Шрифт размер изменяется в процентах с использованием шрифта CSS-размер имущество.
</п>
</тело>
</HTML>

В этом коде мы создаем два абзаца и меняем размер второго абзаца с помощью свойства CSS font-size и устанавливаем его значение на 150 процентов.

Выход:

Этот вывод показывает, что мы успешно изменили размер шрифта, указав значение в процентах.

— установить размер шрифта в соответствии с размером экрана

Размер шрифта также может быть изменен динамически. Это означает, что размер шрифта динамически меняется в зависимости от размера экрана. Чтобы изменить размер шрифта в соответствии с экраном, который мы используем vw (ширина области просмотра). В следующем примере показано использование значений vw в свойстве CSS font-size.

Код:

<HTMLязык=»ан»>
<глава>
<заглавие>Первый документ</заглавие>
</глава>
<тело>
<п>Это обычный шрифт размер в HTML-документе.</п>
<пстиль=»Размер шрифта: 3vw;»>
Шрифт размер изменяется в процентах с использованием шрифта CSS-размер имущество.
</п>
</тело>
</HTML>

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

Выход:

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

– Использование эфемерной стоимости единицы

Мы можем изменить размер шрифта, используя свойство CSS font-size и установив для него значение em. Здесь говорят, что 1em равен текущему размеру шрифта тела HTML-документа. По умолчанию нормальный размер шрифта HTML-документа составляет 16 пикселей, поэтому мы можем сказать, что 1em = 16 пикселей. Следующий практический пример демонстрирует использование единицы em.

Код:

<HTMLязык=»ан»>
<глава>
<заглавие>Первый документ</заглавие>
</глава>
<тело>
<п>Это обычный шрифт размер в HTML-документе.</п>
<пстиль=»Размер шрифта: 2em;»>
Шрифт размер изменяется в процентах с использованием шрифта CSS-размер имущество.
</п>
</тело>
</HTML>

В этом коде мы изменили размер абзаца с помощью свойства CSS font-size и установили его значение на 2 em, что равно 32 пикселям.

Выход:

Этот вывод показывает, что мы изменили размер шрифта, используя значение em свойства CSS font-size.

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

Вывод

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

Размеры шрифтов CSS. Пиксели vs Em vs Rem vs Проценты vs Viewport единицы

В этой статье вы узнаете про выставление размера шрифта в пикселях, em, rem, процентах и viewport единицах.

Эта статья перевод — CSS Font Sizing: Pixels vs Em vs Rem vs Percent vs Viewport Units

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

Для примера, некоторые советуют не использовать фиксированные пиксели на базовом уровне (html и body элементы), так как пользователь не будет иметь возможности сбросить размер шрифтов под свои параметры. Но для людей типа меня, которые зависимы от bootstrap, это не совсем благоразумно. Мы заканчиваем с фиксированными основными значениями в пикселях и начинаем создавать свойства шрифтов для всего проекта, отталкиваясь от основных пиксельных значений.

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

Пиксели

Перед наступлением эпохи адаптивного дизайна, пиксели широко использовались как единица размерности шрифтов для всего от типографики до ширины, отступов и высоты. Тем не менее, пиксели это единицы с фиксированным размером и они не меняются, основываясь на размере viewport или масштабности. Если вы хотите сделать адаптивный сайт, используя пиксели, то это может стать довольно сложным занятием, так как вам придется отслеживать все значения основанные на пикселях в CSS, включая значения в медиа запросах. Так какое же свойство шрифта мы можем использовать, чтобы делать минимальные изменения в нашем CSS, но оставаться масштабируемыми? И тут нам на помощь приходят em, rem, проценты и единицы viewport.

Em — гибкая масштабируемая единица, которая конвертируется браузером в пиксели. Если стандартный размер шрифта в Chrome равен 16px, то 1 em = 16px. Главное заблуждение по поводу em в том, что оно зависит от размера шрифта родительского элемента. Следуя спецификации W3, em относителен размеру шрифта элемента на котором их используют. Em широко используются для типографии, такой как заголовки, текста, параграфы и с элементами ассоциированными с ней, такими как внешние отступы и внутренние.

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

@media (max-width: 400px) {
 html, body { font-size: 15px; }
}

и все em значения будут автоматически пересчитаны.

Тем не менее, у em есть большое предостережение! Наследование!

Для примера, <div> с размером шрифта в 16px содержит <p> размером шрифта в 2em, что пересчитывается как 32px для <p>. Теперь добавьте <div> в <p> с размером шрифта в 0.5em, как результат у дива будет размер 16px, как у половины от 32px, а не 8px. И тут нам на помощь приходят rem.

Rem

rem относителен размеру шрифта корневого элемента(html элемент). Если размер шрифта html элемента равен 16px, то 1rem = 16px. Rem будет ВСЕГДА относителен корневому элементу, не полагаясь на вложенные элементы. Тем не менее, использование исключительно rem без em может вызвать своеобразные проблемы в плане типографики, так как она может стать слишком большой или маленькой, что приведет к проблемам в масштабируемости.

Проценты

Значения в процента всегда относительны от другого значения, будь это родительское значение элемента или другое свойство элемента. Проценты широко используются в адаптивном дизайне. Отличный тому пример Bootstrap. Двенадцати колоночный макет бутстрапа имеет значения ширины выставленные в процентах, таким образом они всегда гибкие и подстраиваются относительно родительского элемента.

Проценты широко используются для выставления ширины и высоты контейнеров, дивов и для адаптивной графики.

Единицы viewport

Ширина и высота viewport свойств относительна ширине/высоте заданного размера viewport.

Подробно про viewport единицы вы можете почитать в этой статье.

1vw = 1% ширины viewport

1vh = 1% высоты viewport

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

Финальный вердикт

С тех пор как я часто начал использовать Bootstrap, мой стандартный размер базового шрифта стал в пикселях. Я использую проценты, чтобы выставить ширину и высоту для изображений, контейнеров и дивов, а em и rem для типографики и элементов относящихся к типографике, таким как margin и padding и т. п. Сейчас я играюсь с единицами viewport для адаптивной типографики и нахожу это очень крутым. Экспериментируйте с этими свойствами как можно больше и вы вскоре найдете стиль подогнанный именно для вас.

Стандарты написания гибкого, надежного и жизнеспособного HTML c CSSCSS свойство background-image как антипаттерн

Стилевые параметры шрифта. CSS

Параметр

Значение

Описание

font-family

(определяет список семейств шрифтов)

Шрифты

название шрифта

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

serif (для Times),
sans-serif (для Helvetica),
cursive,
fantasy,
monospace (для Courier)

                    
<style>
h2 {font-family: "Times New Roman", serif}
</style>
<body>

font-size

(размер шрифта)

Размер шрифта

относительный размер:

larger (больше),
smaller (меньше)

Значения интерпретируются относительно таблицы размеров шрифтов браузера и размера шрифта элемента-родителя.

Например,
если родительский элемент имеет размер шрифта » medium», значение » larger» сделает размер шрифта текущего элемента равным » large».

Размер можно задавать в % и в em.

абсолютный размер:
xx-small,
x-small,
medium (по умолчанию),
large,
x-large,
xx-large

<style>
body {font-size: 12pt}
h2 {font-size: large}
h3 {font-size: 150%}
h4 {font-size: 12pt}
h5 {font-size: 75%}
</style>
<body>
<h2>Заголовок 1</h2>
<h3>Заголовок 2</h3>
<h4>Заголовок 3</h4>
<h5>Заголовок 4</h5>
</body>

Заголовок 1 и 3 заданы в абсолютных единицах,
а Заголовок 2 и 4 в % относительно размера шрифта, заданного для тега <body>, являющегося родительским (100%) элементом для заголовков.

**Размер шрифта в CSS и HTML**
CSS	xx-small	x-small	small	medium	large	x-large	xx-large	—
Масштаб (коэфф-т)	3/5	3/4	8/9	1	6/5	3/2	2/1	3/1
Размер HTML	1	—	2	3	4	5	6	7
Заголовки	h6	—	h5	h5	h4	h3	h2	—

Размер шрифта в CSS и HTML — xx-small
Размер шрифта в CSS и HTML — x-small
Размер шрифта в CSS и HTML — small
Размер шрифта в CSS и HTML — medium (по умолчанию)
Размер шрифта в CSS и HTML — large
Размер шрифта в CSS и HTML — x-large
Размер шрифта в CSS и HTML — xx-large

Распространенные единицы измерения шрифта:

em — высота шрифта элемента
{font-size: 2. 5em},
pt — пункты
{font-size: 16pt},
px — пикселы
{font-size: 12px},
% — проценты
{font-size: 80%}.

Размер шрифта

font-weight
(жирность шрифта)

normal

соответствует числу 400

bold

Жирный (700)

bolder

Жирнее

lighter

Светлее

число

Одно из девяти целых чисел от 100 до 900

Жирность шрифта

Таблица font-weight

font-weight: 100	Thin (Hairline)	— Тонкий (как волос)
font-weight: 200	Extra Light (Ultra Light)	— Extra светлый (Ультра светлый)
font-weight: 300	Light	— Светлый
font-weight: 400	Normal or Reqular	— Нормальный или Обычный
font-weight: 500	Medium	— Средний
font-weight: 600	Semi Bold (Demi Bold)	— Полужирный
font-weight: 700	Bold	— Жирный
font-weight: 800	Extra Bold (Ultra Bold)	— Экстра жирный (Ультра жирный)
font-weight: 900	Black (Heavy)	— Черный (Тяжелый)

font-style
(стиль шрифта)

normal

Нормальный прямой — по умолчанию

italic

Курсив

oblique

Наклонный

font-variant
(вариант стиля шрифта)

normal

по умолчанию и не влияет на отображение шрифта.

small-caps

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

<style>
span {font-variant: small-caps}
</style>

Купи слона! (до изменения стиля)
Купи слона! (после изменения стиля)

font
(позволяет установить сразу несколько свойств шрифта в одном определении)

font-style;
font-variant;
font-weight;
font-size;
line-height;
font-family

Значения параметров указываются через пробел.
Если задается высота строки (line-height), то ее значение отделяется от размера шрифта (font-size) слэшем (/).
Если список шрифтов (font-family) содержит более одного элемента, то последние отделяются друг от друга запятыми.

                    
<style>
body {font: italic 10pt/12pt "Times", serif}
</style>

@font-fase
(указывает семейство шрифтов
и URL-адрес шрифта,
если шрифт отсутствует на компьютере)

font-family

Название семейства шрифтов.

src

URL-адрес шрифта.
Синтаксис: src:url(URL-адрес)
Открывающаяся круглая скобка идет сразу за словом url

подкдючения шрифта                     
<style>
 @font-fase {
 font-family: MyFont;
 src:url(http://myserver.ru/MyFont.ttf)
 }
 p {font-family: MyFont;}
</style>

Как задать размер шрифта в таблице html.

У меня проблема, при которой я установил размер шрифта тела в 11px, но таблицы отображают шрифт в 16px. Я понятия не имею, что вызывает это — я снова и снова перебирал CSS и вывод (источник при переходе на страницу). Установка размера шрифта стола до 11px явно имеет желаемый эффект, но мне не нужно устанавливать его где-либо отдельно от стиля тела.

У меня есть следующий CSS:

Body { font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11px; margin: 0px; background-color: #E7D2B8; color: #863F2B; } img.headerImg { width: 100%; } .menu-strip { float: left; width: 20%; } .main-content { float: left; width: 80%; } .clear { clear: both; } ul.menu { margin: 0px; margin-left: 10px; padding: 0px; list-style: none; } ul.menu li { margin: 0px; padding: 0px; padding-top: 10px; padding-bottom: 10px; } div.footer { width: 60%; margin-left: 20%; } ul.footer-links { list-style: none; } ul.footer-links li { float: left; padding: 20px; } ul.footer-links li:last { clear: right; } table { width: 100%; border-collapse: collapse; } td { vertical-align: top; }

И выход выглядит следующим образом:

Code	Forename	Surname	Address	Postcode	Telephone	Fax	Edit
							Create
code4	James	Blue	address11 address24 address32 town5	postcode4	fone4	fone2	Edit
code5	Fred	White	address13 address24 address31 town1	postcode2	fone5	fone3	Edit

Я серьезно не вижу ничего, что могло бы установить размер шрифта в 16 пикселей в таблице. Это происходит для всех трех разделов (thead, tfoot, tbody). Также кажется, что Netbeans 6.9 не будет правильно отформатировать таблицу, но остальная часть документа (до и после). Его почти как будто что-то не так с таблицей, но я не вижу, что. Это происходит в Firefox и Opera (самые последние версии обоих). Я не тестировал его в IE, потому что он никогда не будет использоваться в IE.

Вы конечно же видели на некоторых сайтах запрет на использование правой кнопки мыши. Эта функция прежде всего борется с теми, кто хочет украсть ваш контент. Полностью от воровства вас не защитит эта мера, но от ручного копирования вполне. Другие варианты .
Не рекомендую отключать правую кнопку мыши, если вы выкладываете в своем блоге материалы, предназначенные для копирования. Это могут быть коды, скрипты, кулинарные рецепты, справочные материалы и другое. Запрет на копирование в данном случае отвернет от вас посетителей, и ваш блог станет менее полезным для посетителей. Если вам важна защита от плагиата, то тогда лучше используйте добавление вашего url в конце копии. Тогда вы будете уверены, что если кто-то захочет опубликовать в другом месте в интернете, скопированное у вас, то копипастер с большей вероятностью поделится ссылкой на ваш блог.
Этот рецепт подходит для любого веб-сайта. Вам нужно лишь вставить код на все страницы вашего блога:

В Blogger добавьте код в гаджет HTML/Javascript во вкладке “Дизайн”. Если вы используете одну из последних тем на вашем блоге (Emporio, Contempo, Soho, Notable), то не забудьте активировать видимость виджета (галочка напротив “Виден всем”, “Показать виджет » HTML/JavaScript «”).
На WordPress добавьте код в виджет “Текст”.

Автор: Иванова Наталья

2019-03-03

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

Вы можете воспользоваться теми же сервисами, какими мы пользовались для .

Сервисы готовых открыток

Создать открытку 8 марта онлайн

Воспользуйтесь следующими сервисами, чтобы создать открытку практически с нуля.

Canva — известный многим функциональный фоторедактор. Здесь вы найдете множество шаблонов. Нужна регистрация.
Printclick Если у вас свой бизнес, то вы можете заказать партию открыток с логотипом и контактами своей компании. Воспользоваться же вы можете генератором открыток princlick. Отличная рекламная акция и недорого.
Crello — редактор, в котором нужна регистрация. Не пугайтесь английского языка, в настройках можно переключится на русский.
Онлайн-открытка — для тех, у кого хорошо развита фантазия, так как создавать открытку придется с чистого листа.
Mumotiki — подготовьте красивую картинку, а поздравительный текст вы сможете добавить здесь. Кстати, если вам нужно просто добавить текст на картинку, то вы можете ознакомиться с .

Я надеюсь, что воспользовавшись одним из этих генераторов, вы сможете достойно поздравить своих дам с 8 марта!

Автор: Иванова Наталья

2019-02-17

Содержание статьи:

Google Plus закрывается

Платформа Google Plus не оправдала надежд разработчиков и будет удалена полностью уже 2 апреля 2019 года. Вместе с ней исчезнут связанные с ней альбомы в Google Фото, станут недоступными авторизации на сайтах с аккаунтом Google Plus. Уже с 4 февраля стала недоступной функция создания профилей Google Plus, каналов и страниц. Если на вашем аккаунте хранился ценный контент, то вы можете скачать резервную копию .
Больше всех изменения коснутся блогеров, ведущих свои блога на Blogspot. Станут недоступны некоторые виджеты G+, комментарии G+, а также профиль Google +. Об этом сказано в уведомлении в админке Blogger:

После объявления о прекращении работы API Google+, которое запланировано на март 2019 года, 4 февраля будет внесен ряд изменений в интеграцию Blogger с Google+.
Виджеты Google+. В дизайне блогов больше не будут поддерживаться виджеты «Кнопка +1», «Подписчики Google+» и «Значок Google+». Из вашего блога будут удалены все экземпляры этих виджетов.
Кнопки +1. Будут удалены кнопки +1 и G+, а также ссылки «Опубликовать в Google+» под записями в блоге и на панели навигации.
Обратите внимание, что, если вы используете пользовательский шаблон, в котором есть функции Google+, его может быть необходимо изменить. Обратитесь за рекомендациями к тому, кто предоставил вам этот шаблон.
Google+ Комментарии. Будет прекращена поддержка комментариев с использованием Google+, а для всех блогов, которые используют эту функцию, будут восстановлены стандартные комментарии Blogger. К сожалению, комментарии, размещенные через Google+, невозможно перенести в Blogger, поэтому они больше не будут отображаться в вашем блоге.

Удаление комментариев Google Plus

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

https://takeout.google.com

, чтобы сказать резервную копию комментариев от Google + на свой компьютер. Только загрузчика для него не предусмотрено и восстанавливать комментарии вам можно только вручную достаточно кривым способом. Хорошо, что я в свое время вовремя .

Как заменить профиль гугл плюс профилем Блоггер

Если вы ведете блог на Blogspot, то целесообразно сейчас вернуться с профиля Гугл Плюс на профиль Blogger (для тех, кто переключился на гугл плюс в своё время). Рекомендую сделать это прямо сейчас во избежании непредвиденных ситуаций, которые могут происходить при удалении аккаунтов Google Plus.

Как вернуть профиль Blogger

Сделать это просто в настройках админки Blogger:
Настройки –> Пользовательские настройки –> Профиль пользователя – здесь выберите Blogger

Сохраните изменения.

Подтвердите переход на и задайте свое имя или никнейм.

Не забудьте загрузить аватар в вашем профиле Blogger.

Как удалить профиль гугл плюс

Если вы решили раз и навсегда избавиться от профиля Г+, то перейдите на свою страницу гугл плюс –> Настройки –> прокрутите страницу до конца вниз –> удалить аккаунт гугл плюс:

Автор: Иванова Наталья

Сегодня расскажу что такоеCSS3, с чем его едят, где его искать, как правильно его прописывать. Предупреждаю, буду рассказывать от себя, упрощенно для широкой публики, как я это вижу + примеры. Итак, начнем издалека.
CSS – это стили, в которых прописываются свойства объекта. Значит, они есть во всех существующих движках, если вы их не можете найти, значит либо не там смотрите, либо их действительно нет (кривой сайт ). Где же они обычно найти? Обычно это корень сайта, название файла style.css, хотя, в принципе, название не так важно, как расширение.css, если файл с таким расширением – это файл стилей.
Смотрите также на моём блоге.

Где их искать?

Путь к файлу приписывают в шаблоне между

» />

В Blogspot немного по другому, там стили прописаны сразу в коде, до тега между

тут стили

Как выглядят стили?

разберем на примере:

#header { background: #fff; font-size: 13px; line-height: 1. 5; font-family: Georgia,»Times New Roman»,»Bitstream Charter»,Times,serif; color: #333; } .contacts { position: absolute; top: 20px; right: 10px; }
контакты автора сайта сайта

Вы можете просмотреть стили на любом сайте, достаточно лишь в браузере. Теперь вы без труда их узнаете, прочитав как они выглядят в этой статье.
Как видно, стили по разному прописываются. Стилям, которые начинаются на знак решетки соответствует определенный id блока в , стилям с точкой определенный класс блока. По другому никак, не будут стили работать. Названия вы можете придумать какие хотите, главное чтоб они соответствовали написанным id и class в html. Свойства стиля обязательно обрамляются в скобки, после него ставится двоеточие (смотрим на пример выше ), пишется параметр и закрывается точкой с запятой. Допускается что в последнем свойстве в конце можно точку с запятой не ставить, достаточно закрывающей скобки.
Бывает что CSS прописывают сразу в блоке, не выводя его в отдельный файл:

шапка сайта

CSS на Blogspot

В стили могут прописываться по другому, объясню позже из-за чего. Открыв код можем видеть такое (просмотрите стили внимательно, и вы увидите знакомые блоггеровские теги, задающие стили):

Как видим, свойство стиля .Header h2 прописано отдельно выше. Как понять и найти свойство? очень просто, у font есть параметр header.font , вот его то мы и ищем. Находим его в группе свойств “Blog Title” для стиля “.header h2″, внутри 2 свойства “header.font” и “header.text.color”. Вот их мы и меняем. Это сделано для быстроты чтения стилей браузером, так он меньше делает запросов. Ведь свойство header.text.color может где-то еще повторяться. Ниже еще есть header.shadow.offset.left и другие, смысл в них тот же, повторять не буду.
Когда говорят искать в css (или стилях), значит ищем в blogspot’е между тегами
и обычно до тега
если конечно они не прописаны прямо в html (пример выше, стили в блоках). В других cms обычно все вынесено в отдельный файл с расширением. css

Автор: Иванова Наталья

2019-02-15

Эта свежая статья написана, чтобы осветить актуальную информацию об удалении лишних ссылок из шаблонов Blogspot, а также из новых тем Blogger. Как вы знаете, в кодах Blogger в 2018 году произошли изменения, поэтому многие действия с кодом нужно производить по новому. Плюс появились новые темы, которые сформированы иначе. В связи с этими изменениями разберем тему про удаление ссылок.
Проверить свой блог на наличие внешних ссылок вы можете на сервисах https://pr-cy.ru/link_extractor/ и https://seolik.ru/links . Не забывайте, что проверять нужно не только главную страницу блога, но и страницу записей (постов) и страницы (Page). Большое количество внешних ссылок, открытых для индексации препятствуют .

Как удалить ссылки из старого стандартного шаблона Blogger

На примере шаблона Простой (Simple).
Такие шаблоны дают больше всего внешних ссылок. В моем тестовом блоге при установке простой темы при проверке обнаружилось 25 внешних ссылок на главной странице, из них индексировались 14.
Напоминаю, что перед тем, как производить изменения в коде шаблона, сделайте резервную копию!

Удалить ссылку на Blogger — https://www.blogger.com/. Эта ссылка заключена в виджете Attribution. Во вкладке “Дизайн блога” он отображается, как гаджет Атрибуция и . Чтобы его удалить, переходим во вклудку “Тема”-> изменить HTML. По поиску виджетов (список виджетов) находим Attribution1 и удаляем весь код вместе с секцией footer, в которую он заключен. Так выглядит удаляемый код в свёрнутом виде:

А так полный код:
Сохраняем изменения и проверяем блог на наличие Атрибуции.
Вы, конечно же видели в своём блоге иконки “Гаечный ключ и отвертка” для быстрого редактирования виджетов. Каждая такая иконка несет с собой внешню ссылку на Blogger. Сейчас они закрыты тегом nofollow, но все равно от них нужно избавляться. Править же виджеты вы будете во вкладке Дизайн.
Вот неполный перечень ссылок, которые зашифрованы в иконках гаечного ключа (ID блога будет ваш)
— Виджет HTML1: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=HTML&widgetId=HTML1&action=editWidget&sectionId=header
— Виджет HTML2 http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=HTML&widgetId=HTML2&action=editWidget&sectionId=header
— Архив блога: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=BlogArchive&widgetId=BlogArchive1&action=editWidget&sectionId=main
— Ярлыки блога: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=Label&widgetId=Label1&action=editWidget&sectionId=main
— Популярные сообщения: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=PopularPosts&widgetId=PopularPosts2&action=editWidget&sectionId=main
От всех этих ссылок легко избавиться. Найдите в шаблоне блога тег . Он встречается столько раз, сколько виджетов в вашем блоге. Удалите все вхождения тега .
Удаляем ссылки на быстрое редактирование записи блога (иконка “Карандаш”). Упрощает редактирование постов, но несет в себе угрозу в качестве внешней ссылки вида: https://www.blogger.com/post-edit.g?blogID=1490203873741752013&postID=4979812525036427892&from=pencil
Как удалить:
Способ 1 . Во вкладке Дизайн отредактируйте элемент “Сообщения блога” и снимите галочку в пункте “Показать «Быстрое редактирование””.
Способ 2 . найдите в шаблоне блога тег и удалите его. Сохраните изменения и проверьте свой блог на наличие иконки и ссылки.
Удалить Navbar. Найдите по поиску виджетов в шаблоне html блога Navbar1 и удалите весь код вместе с секцией.
А именно:

Сейчас Навбар в блоге не дает индексируемых внешних ссылок, но я считаю, что это лишний элемент, который не несет в себе функциональной нагрузки, и его лучше удалить.
Удалите внешние ссылки на изображения. При загрузки изображений в сообщение блога, в них автоматически встраивается ссылка. Чтобы убрать такие ссылки, необходимо отредактировать все записи блога. В режиме “Просмотр” и далее на иконку “Ссылка”. Если изображение не несет в себе внешнюю ссылку, то при клике на фото в редакторе записи иконка “Ссылка” не активна (нет подсветки иконки).
Удалить ссылку на профиль автора блога. Удалить автора блога под записью. Для этого найдите код true и вместо true пропишите false. Получится false
Закрыть ссылку из виджета “ ” от индексирования тегом nofollow. Если вы используете в своем блоге виджет “профиль”, то найдите через быстрый поиск по виджетам в шаблоне блога код гаджета Profile1. Нужно отредактировать код виджета, заменив в двух местах rel=’author’ на rel=’nofollow’ и добавить к двум ссылкам rel=’nofollow’. У вас должно получиться, как на скриншоте:

Сделано на примере редактирования профиля Google Plus. Напоминаю, что Google Plus будет ликвидирован 2 апреля 2019 года. Соответственно после этой даты нужно будет производить другие изменения в коде виджета “Обо мне”.
Проверяем на наличие внешних ссылок любую страницу записи Blogspot, к которой оставлены комментарии. Найдите и удалите в шаблоне блога код:

В Настройках блога по пути Настройки блога -> Другое -> Фид сайта -> Разрешаем фид блога применяем следующие настройки:

Убрать внешние ссылки из нового стандартного шаблона Blogger

На примере темы Notable

Удаляем Attribution (ссылка внизу – Технологии Blogger)
Находим в шаблоне блога по поиску по виджетам (список виджетов) Attribution1 и удаляем код вместе с секцией по аналогии со старым шаблоном Blogger (смотри выше 1).
Удаляем ссылку из виджета «Сообщить о нарушении». Это виджет ReportAbuse1. Находим в поиске по виджетам:
Код выглядит целиком так:
Проверяем страницу записи блога с комментариями и удаляем ссылки по аналогии со старыми шаблонами блога (смотри выше – пункт 8).
Удаляем ссылки из постов блога, которые вшиты в картинки записей (смотри пункт 5).

Автор: Иванова Наталья

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

1. Можно не ставить никакого выравнивания, просто написать текст и он по умолчанию выровняется по левому краю. А можно специально выровнять текст по центру, по левому, по правому краю или по ширине текста. Соответственно, атрибуты, которые для этого нужны:
align =»left» — по левому краю;
align =»center» — по центру;
align =»right» — по правому краю;
align =»justify» — по ширине текста.

Примечание: Если вы хотите поставить текст на страницу, без таблицы (я приводила пример страницы, сделанной без таблицы: как в этой Новеллизации) — вы просто ставите атрибут выравнивания в тег абзаца:

Так же можно выровнять текст, используя контейнерный тег

Выглядеть такой текст будет так:

Текст, выровненный по центру

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

2. Теперь зададим атрибуты самого текста: шрифт, цвет шрифта и размер шрифта. Для этого нужны такие атрибуты:
2.1. font — означает шрифт;
face — лицо, то есть, наименование шрифта в языке HTML. Аналогично для задания стиля используется слово «family», о нём скажем позднее;
Шрифт Arial

2. 2. color — цвет;
Цвет шрифта (в данном случае, сиреневый)

2.3. Атрибут size задаёт размер шрифта;
Можно прописать размер шрифта в пунктах:

Крупный шрифт

Мелкий шрифт

Но я не рекомендую пользоваться таким способом, потому что размер шрифта будет зависеть от браузера пользователя. Пользователь зашедший с браузера Опера, где по умолчанию стоит масштаб 100%, увидит ваш шрифт font size=»+4″ умеренно крупным и легко читаемым. Пользователь, зашедший с Internet Explorer, на котором по умолчанию стоит «Самые крупные значки» увидит ваш текст просто гигантским и станет думать, не рассчитан ли ваш сайт на слабовидящих.
Лучше задать более точные параметры

Можно прописать размер шрифта при помощи стиля, вот так:. Если мы зададим размер шрифта 20pt таким способом, то вся строчка будет выглядеть так:
Размер шрифта 20pt.
И зададим одновременно цвет — сиреневый и размер шрифта — 24pt:
Размер шрифта 24pt.

Обратите внимание, что если вы прописываете стиль, то между font и size ставится дефис: font-size.
Слово STILE может относиться не только к шрифту, но и ко множеству других значений. Поэтому если вы прописываете стиль — атрибут, указывающий на то, что вы задаёте стиль именно размера шрифта («font-size: 24pt»), берётся в кавычки весь: STILE=»font-size: 24pt»

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

Пояснение 2: цвет шрифта можно задавать и словами (red, blue, green и т.п.), но тогда лучше писать вот так:

ТЕКСТ

Атрибут span означает, что мы имеем дело со встроенным элементом абзаца. Он используется для изменения вида текста или его логического выделения. Например, цветом.

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

И любые другие таблицы цветов, какие только сможете найти. «Опасные» или «безопасные» цвета — значения не имеет. Они читаются все в равной степени. Разница состоит лишь в возможностях монитора каждого пользователя.

3. Пропишем внутрь ячейки тэг с атрибутами, необходимыми для того, чтобы задать параметры нашего текста. Порядок записи атрибутов внутрь тэга не важен. Цвет шрифта я задаю в данном случае — #000000 — чёрный:

&gt

Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине.

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

4. Теперь надо задать абзац и красную строку.
Тэг

Если вас это устраивает, можете смело употреблять тэг

=»»>Чем тэг

Тэг

Однако, вернёмся к проблеме Красной строки, которую ни тэг
Есть такой способ: можно перед каждым отступом Красной строки поставить несколько пробелов. Они обозначаются вот такой кадаброй:
В языке HTML эта конструкция используется для ввода специальных символов. Если браузер встречает в тексте вот такой знак (&) (он называется — амперсанд), он начинает интерпретировать следующие за ним буквы как код специального символа. Так продолжается до тех пор, пока не встретится точка с запятой. В данном случае мы используем для добавления пробела. Добавив несколько пробелов, мы получим отступ.
Если добавить восемь таких конструкций — — у нас получится отступ на восемь знаков.

Но, к сожалению, этот текст будет выглядеть ровно, только в браузерах FireFox и Internet Explorer. В браузере Opera, он будет выглядеть… м-м-м… Как молодой бычок пописал… В общем, очень неровно.
Если вы хотите чтобы ваш текст всегда, во всех браузерах выглядел профессионально, вам нужно прибегнуть к более сложному способу.

Для того, чтобы задать отступ абзаца, нужно прописать для него стиль и назвать его, к примеру, «p1». Я уже объясняла, что стиль начинается с атрибута «style». Только сейчас этот атрибут будет отвечать не за цвет или размер шрифта, а за абзац и отступ текста. Этот стиль нужно записать так:

Значение text-indent: 1.5em; — это и есть наш отступ. Значения margin и padding мы обнуляем, чтобы никаких лишних отступов в нашем тексте не было.
Теперь нужно вставить значение стиля текста в код страницы, между

&gt
&gt

Теперь весь текст, который вы поставите в тэги вот таким образом —

Примечание: поскольку мы уже задали выравнивание по ширине, задав класс текста p1, нам необязательно оставлять выравнивание текста в самой ячейке и значение align =»justify» можно удалить, чтобы не было лишних атрибутов. Или оставить, если вы будете вводить в ячейку ещё текст, но помимо стиля p1, с другими параметрами.
Я задала два абзаца, чтобы результат был более нагляден.
Теперь наш фрагмент с двумя абзацами текста будет записываться так:

&gt

5. Вставляем полученную конструкцию на нашу страницу, в среднюю ячейку второй таблицы. Вместе с таблицей HTML-код теперь будет выглядеть так:

&gt
&gt
&gt

&gt

&gt
&gt
&gt

	ru/Sod.html»>

&gt

&gt
&gt
&gt

&gt

&gt&gt

&gt
&gt

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

6. Заменяем весь этот HTML-код нашей первой страницы полностью и получается вот что:

7. Как видите, получилось не слишком красиво, потому что текст «прилипает» к границам таблички. От этого можно спастись разными способами. Самый привычный — положить текст в ещё одну табличку на одну ячейку, но задать ей border=»0″, а размер не 100%, а 95%. При этом в средней ячейке, в которую мы вставляем эту табличку, для всей ячейки задать выравнивание по центру, чтобы наша табличка с текстом встала строго по центру ячейки. Тогда код будет выглядеть так:

&gt

&gt
&gt
&gt

&gt

&gt
&gt
&gt

&gt

&gt
&gt
&gt

ru» src=»https://i2.wp.com/pa1.jpg» loading=»lazy»>

&gt

&gt
&gt

&gt

&gt&gt

&gt
&gt

Зелёным цветом я обозначила ещё одну табличку, которую вставила для того, чтобы текст отступил от края основной ячейки.
Единственное, что я забыла — это прописать цвет фона для ячейки таблицы, в которой стоит наш текст. Сделаем это сейчас. Поскольку мы прописываем цвет фона ячейки, а не всей таблицы, то и вставляем мы соответствующий атрибут в тег ячейки (я обозначила вставку жирным шрифтом):

&gt
&gt
&gt

&gt

&gt
&gt
&gt

&gt

&gt&gt

&gt

&gt
&gt
&gt

dugward.ru» src=»https://i2.wp.com/pa1.jpg» loading=»lazy»>

&gt

body bgcolor=#e5e5e7 border=»3″&gt&gt

&gt

&gt&gt

&gt
&gt

Теперь загрузим всю эту конструкцию на нашу страницу и получится вот что.

У меня проблема, когда я установил размер шрифта тела в 11px, но таблицы отображают шрифт в 16px. Я понятия не имею, что вызывает это — я снова и снова перебирал CSS и вывод (источник при переходе на страницу). Настройка размера шрифта стола до 11px явно имеет желаемый эффект, но мне не нужно устанавливать его где-либо отдельно от стиля тела.

У меня есть следующий CSS:

И вывод следующий:

Code	Forename	Surname	Address	Postcode	Telephone	Fax	Edit
							Create
code4	James	Blue	address11 address24 address32 town5	postcode4	fone4	fone2	Edit
code5	Fred	White	address13 address24 address31 town1	postcode2	fone5	fone3	Edit

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

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

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

Чтобы указать ширину таблицы необходимо использовать CSS-свойство width , а чтобы задать высоту необходимо применять свойство height .

На примере это выглядит следующим образом.

Table { width: 500px; height: 100px; }

Результат в браузере:

Полный код:

Таблица с заданными размерами

Таблица с заданными размерами
1	2	3	4	5
1	2	3	4	5
1	2	3	4	5

Значения ширины и высоты таблицы могут быть заданы, как абсолютной величиной (в пикселях), так и относительной – в процентах. Например, 20px и 20% соответственно.

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

Существует еще одно значение – auto. И оно является особым, поскольку с его помощью вычисление ширины и высоты таблицы происходит автоматически, по умолчанию. На практике указание этого значения выглядит вот так.

Width: auto;

Height: auto;

Хотим акцентировать ваше внимание на еще таком важном моменте. Что высоту в процентах лучше не указывать, поскольку, как правило, в таком случае они работать не буду.

Указание размеров отдельных ячеек и столбцов

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

Изменение размеров ячеек осуществляется при помощи тех же самых CSS-свойств, что и размеры таблицы, а именно: width и height .

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

Задать ячейкам индивидуальные имена классов. Выглядеть это будет вот так:
А после этого следует применить стили для данных классов.
Задействовать атрибут style , внутри которого прописать необходимый CSS-код.

На практике второй вариант будет выглядеть следующим образом:

…

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

Таблица с заданными размерами
1	2	3	4	5
1	2	3	4	5
1	2	3	4	5

Результат в браузере:

Как изменить размер шрифта в таблице

Зачастую возникает потребность в изменении размера текста в таблице. Например, в ячейках-заголовках. Это можно сделать с помощью CSS-свойства font-size . Давайте зададим размер шрифта для элементов

Th { font-size: 30px; }

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

« Предыдущая запись

Следующая запись »

Рубрики

Личный кабинет
Оборудование
Оплата
Тарифы
Проблемы и ошибки
Личный кабинет

Последние записи

Страницы

Контакты
О сайте

Как изменить размер шрифта в HTML

Качественная верстка веб-сайтов имеет главную цель — сделать информацию на странице максимально читабельной и удобной для восприятия пользователем. И работа с текстом посредством html является основным и базовым навыком, который необходимо иметь при работе с сайтами. В данной статье подробно описано, как изменить размер текста посредством языка веб-разметки.

Форматировать текст при помощи HTML — это очень просто

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

В этом материале мы подробно расскажем о том, каким образом выполняется форматирование шрифтов в html-документах.

Общие принципы редактирования текста на веб-страницах

Для начала требуется разобраться, какие возможности для форматирования текста дает нам html. Существует три основные характеристики шрифта — это гарнитура (характеристика, определяющая внешний вид букв и знаков), цвет и размер. Читабельность любого документа зависит от того, насколько грамотно сочетаются данные характеристики.

Характеристики текста в html-разметке меняются при помощи тегов и атрибутов. Тег — это основная составляющая языка, его главная логическая единица, а атрибут служит для того, чтобы задать конкретное значение для каждого элемента страницы, отмеченного тегом.

Также необходимо помнить о том, что отображение текста может различаться при использовании разных браузеров, поэтому прежде, чем завершить работу над сайтом, необходимо убедиться в корректности отображения информации во всех основных используемых браузерах. К примеру, размер шрифта в html при использовании старых версий Internet Explorer может отличаться по сравнению с новыми версиями.

Тег

Основные теги, которые используются при форматировании текста на веб-странице, — это и .

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

Так как нас в первую очередь интересует, как изменить размер шрифта в html, потребуется употребление атрибута size.

Выглядит это таким образом:

Здесь располагается текст

Значение размера шрифта html задается в числовых единицах от 1 (самый маленький) до 7 (самый большой). За среднее значение традиционно принимается 3 (соответствует размеру 13,5 в гарнитуре Times New Roman).

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

Размер шрифта 1

Размер шрифта 2

Размер шрифта 3

Размер шрифта 4

Размер шрифта 5

Размер шрифта 6

Размер шрифта 7

Помимо абсолютных числовых значений могут использоваться, в том числе, и относительные. Для этого также используется данный тег. Размер шрифта html, как указывалось выше, по умолчанию принят за 3, поэтому, отталкиваясь от этого, можно прибавлять или отнимать целые числовые значения, чтобы получить желаемый результат. Вот так это выглядит:

Здесь располагается текст

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

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

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

Тег

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

Для этого тега значения задаются посредством атрибута style. Вот так это выглядит в коде:

Здесь располагается текст

Как можно заметить, здесь используется введение CSS-кода (font-size), а размер задается при помощи пунктов (pt, point). За стандартное значение принимается размер в 12pt, изменять который можно, увеличивая или уменьшая на целое число.

Изменения размера шрифта при форматировании заголовков

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

В таком случае целесообразно пользоваться тегами

Пример кода:

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

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

Несколько советов напоследок

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

Для удобства возьмите на заметку следующие рекомендации:

При верстке не стоит ограничиваться средствами html. Как только освоены основы построения сайта, можно приступать к изучению CSS. Это откроет новые горизонты в создании веб-страниц.
Нельзя пренебрегать тестированием готового сайта в различных браузерах и на разных платформах. Как уже писалось выше, параметры текста могут существенно отличаться, особенно при использовании устаревших версий браузеров.
Всегда следует использовать пробелы и табуляцию при написании кода. Это облегчает его читабельность и понимание.
Комментарии к коду — это не только инструмент для удобного восприятия, но и знак хорошего тона среди разработчиков.

Размер шрифта имеет значение

Веб-обзор
август 1999 г.

В погоне за идеальным дизайном страницы с помощью CSS большинство авторов попытаются повлиять на шрифт страницы. Первым делом обычно устанавливают тип шрифта, используя такие свойства, как font-family (подробнее на эту тему см. статью «Чувство стиля» «Все в семействе шрифтов»). Следующее, что обычно пытаются сделать авторы, — это изменить размер шрифтов, и тут-то и начинаются проблемы.

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

Абсолютные размеры

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

 средний xx-маленький xx-большой
          х-маленький х-большой
            маленький большой

…и значение по умолчанию средний . Запомните это значение по умолчанию, потому что оно станет очень важным для дальнейшего обсуждения.

Использовать эти ключевые слова довольно просто. Допустим, вы хотите, чтобы все элементы h2 были очень большими. Это делается следующим образом:

 h2 {размер шрифта: большой x;}

С другой стороны, вы можете сделать текст в нижнем колонтитуле маленьким. Вот один из способов сделать это:

 DIV.footer {размер шрифта: маленький;}

Соотношение между этими размерами точно не определено в CSS, но предлагается коэффициент масштабирования около 1,2, что означает, что если средний эквивалентен 12pt , то маленький будет примерно 10pt , x -маленький будет примерно 8pt , большой будет примерно 14pt и так далее. Текущие браузеры, похоже, использовали этот коэффициент масштабирования, поэтому в этом случае нет большой разницы в размере шрифта.

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

Наверное, все это кажется очень простым. Ничего сложного в этом быть не может, верно?

Несовместимо, но не ошибочно

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

Причина этого столь же проста, сколь и неприятна. Спецификация CSS говорит, что каждому из этих размеров соответствует определенный размер шрифта, и эти значения никогда не меняются. Поэтому, если браузер присваивает средний должен быть 12 пунктов, тогда любой шрифт, размер которого установлен на средний , будет иметь размер 12 пунктов. Проблема в том, что в спецификации не указано, какому размеру должно соответствовать каждое ключевое слово. Браузер A может установить medium таким же, как 11pt , в то время как браузер B установит его на 13pt , а браузер C выберет 12pt . Без явного набора значений браузерам не нужно использовать одни и те же значения баллов для этих ключевых слов.

Возможно, нам повезло, поскольку поставщики браузеров могли выбрать одинаковые значения для этих ключевых слов. Конечно, мы не были, но причина этого может вас удивить. Это включает в себя устаревшее поведение в HTML и количество ключевых слов абсолютного размера.

Если вы помните, есть семь ключевых слов абсолютного размера. В HTML 3.2 было семь размеров FONT (например, FONT size="4" ). Поэтому кажется логичным, что семь ключевых слов должны соответствовать каждому из семи размеров FONT . К сожалению, это означает следующее:

Рис. 1. Размеры шрифта и абсолютные размеры.
1	2	3	4	5	6	7
хх-маленький	х-маленький	маленький	средний	большой	x-большой	xx-большой

Обратите внимание, где средний попадает: на число 4. Однако в HTML размер шрифта FONT по умолчанию равен 3, поэтому, судя по этой таблице, «обычный» текст (имеющий размер 3) будет соответствовать маленькому , а не средний . Это то, что делает Internet Explorer. С другой стороны, Navigator 4.x предполагает, что средний должен быть таким же, как «обычный» (размер 3) текст. Это также вполне разумно, так как естественно предположить, что значение по умолчанию ( средний ) должно соответствовать «обычному» тексту.

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

Рис. 2. Несоответствия требованиям.
Это текст размером 12 пунктов.	Это средний текст.	Это текст размером 14 пунктов.
Это текст размером 10pt.	Это мелкий текст.	Это текст размером 12pt.

В Navigator 4.x первые две ячейки в каждой строке должны содержать текст одинакового размера; в Проводнике вторая и третья ячейки должны иметь текст одинакового размера. Кикер в том, что ни то, ни другое неверно. На этот раз в несоответствии между браузерами нельзя винить ни один, ни другой, потому что оба соответствуют спецификации. Просто они совместимы по-разному.

Относительные размеры

Есть два других ключевых слова, оба из которых не являются противоречивыми. Это больше и меньше , и их эффект заключается в увеличении или уменьшении размера шрифта по отношению к родительскому элементу с использованием постоянного коэффициента масштабирования (в спецификации рекомендуется 1,2). Таким образом, при следующей разметке:

 ТЕЛО {размер шрифта: 12pt;}
БОЛЬШОЙ {размер шрифта: больше;}
МАЛЕНЬКИЙ {размер шрифта: меньше;}

…любой текст в пределах 9Элемент 0006 BIG будет иметь размер около 14 пунктов, тогда как любой текст SMALL будет иметь размер около 10 пунктов. Опять же, точные размеры зависят от коэффициента масштабирования, используемого браузером, но 1,2, похоже, используется довольно постоянно.

Опасность здесь заключается в том, что изменения в размере являются кумулятивными. Возьмите эту разметку:

 UL {размер шрифта: меньше;}

Этот стиль приведет к тому, что размер шрифта каждого элемента UL будет меньше, чем его родительский элемент. Обычно это нормально, но что происходит, когда у вас есть вложенные списки? Вот пример:

Это элемент списка…
…и этот содержит неупорядоченный список:
- Это элемент списка…
- …и этот содержит неупорядоченный список:
  - Это элемент списка…
  - …и этот содержит неупорядоченный список:
    - Это элемент списка…
    - …и этот содержит неупорядоченный список:
  - плюс еще один элемент списка.
- плюс еще один элемент списка.
плюс еще один элемент списка.

Если ваш браузер совместим с CSS, то вы должны увидеть, что каждый список становится все меньше и меньше, становясь все менее разборчивым. Это совершенно правильное поведение. Тот факт, что размер шрифта становится меньше с каждым списком, — это именно то, что описывает правило и что должен делать браузер.

Основное преимущество использования ключевых слов относительного размера заключается в том, что они заставляют все работать в соответствии с предпочтениями пользователя по умолчанию. Они также позволяют пользователю влиять на размер всех шрифтов. Например, если у пользователя плохое зрение, и он не может прочитать часть вашего текста, он может увеличить размер шрифта по умолчанию и вместе с ним увеличить размер всего остального, сохраняя при этом те же относительные размеры: МАЛЕНЬКИЙ текст все равно будет меньше обычного текста и т.д.

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

 TD {размер шрифта: меньше;}

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

Улучшенный размер через структуру

Одним из возможных обходных путей является использование контекстных селекторов в ваших интересах:

 ТАБЛИЦА TD ТАБЛИЦА TD {размер шрифта: меньше;}

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

Гораздо лучший обходной путь — назначить класс ячейкам таблицы, которые содержат текст, который должен быть меньше, например:

 TD.aside {размер шрифта: меньше;}

 Текст этой ячейки должен быть меньше
текст его родительского элемента.

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

Заключение

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

В следующем месяце мы рассмотрим еще два способа установки размера вашего текста — меры длины (например, в пунктах) и проценты — и то, насколько они во многом похожи на ключевых слов с размером шрифта . А пока оставайтесь стильными!

Какой правильный размер шрифта в веб-дизайне?

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

TL;DR: начните с основного текста и установите для него размер по умолчанию 1em , который в большинстве браузеров рассчитывается как 16 пикселей. Используйте относительные единицы измерения и оттуда увеличьте размер шрифта, а в идеале также пропорционально макет и увеличьте его на больших окнах просмотра, так как мы можем предположить, что зритель находится дальше.

Святая троица типографики

Шрифт настолько хорош, насколько он настроен. Вы можете выбрать лучшие шрифты для своего веб-дизайна или дизайна приложения, и все равно сильно испортить их (каламбур), установив их такими маленькими или другими способами неуместными. Святая троица типографики, когда дело доходит до настройки вашего текста:

размер шрифта,
высота строки (или интерлиньяж) и
длина строки (или размер)

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

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

Разные виды текста имеют разный размер

Как и при выборе подходящего шрифта, спросите себя, каково основное применение вашего текста? Это формат для длительного чтения , как блог? Тогда основной текст — звезда вашего шоу. Это портфолио или более маркетинговый понты? Затем в игру вступает отображаемый текст. Будь то приложение или пользовательский интерфейс с очень короткой точной информацией, тогда функциональный текст является вашим основным действующим лицом. Вот значения, которые я использую в своих проектах. Используйте их как полезные рекомендации.

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

Основной текст

По умолчанию: 16px или 1em
На мобильных устройствах: используйте значения по умолчанию, иногда на 10% меньше что сделало основной текст слишком маленьким. В видео я показываю ужасный пример веб-сайта отеля, где основной текст имеет размер всего 11 пикселей на рабочем столе, что просто смешно. Даже для мобильного он был бы слишком мал.

Отображаемый текст (Заголовок 1)

По умолчанию: 40px или 2.5em для

На мобильных устройствах: 32px или

 2em 9000 занимает слишком много места. 
 На рабочем столе: увеличьте до  64px  или  4em 
 Я использую это как максимум  для моих размеров шрифта.  Для других заголовков вы должны выбрать некоторые промежуточные значения, которые по-прежнему будут создавать визуальную иерархию. В большинстве случаев вам нужно только стилизовать 
 до  .  может иметь тот же размер, что и основной текст, но более жирный или другой шрифт, чтобы он все равно выделялся как заголовок.
 Функциональный текст (подписи, навигация) 
 По умолчанию:  12 пикселей от  до  14 пикселей  или  0,75em от  до  0,875em 
 подняться до  16px  или  1em 
 Этот текст  может быть меньше , чем основной текст. Это потому, что в противном случае вам было бы трудно вписать его в свой дизайн. Тем не менее, он должен быть читаемым. Один из советов здесь — использовать немного более сильный вес (например, средний) и также увеличить отслеживание (на 1% или 0,01 em).
 Относительные единицы rock 
  em  и  rem  — это относительные единицы, используемые в CSS, и в этой статье давайте рассматривать их как взаимозаменяемые (но если хотите, узнайте здесь, когда em или rem). Причина, по которой я люблю относительные единицы, заключается в том, что они   облегчить жизнь нам, типографам. Конечно, ваш текст в конечном итоге будет отображаться с определенным размером пикселя, и вашего корневого размера должно хватить для этого (посмотрите на минимальные размеры выше). Но для проектирования и кодирования я считаю очень полезным думать об отношениях между различными элементами, , а не о точных размерах.
 Глядя на следующий пример кода, мне как дизайнеру проще понять и обработать rem.
 р {
 размер шрифта: 1rem;
}
ч2 {
 размер шрифта: 2.5rem; /* 3 раза больше основного текста */
}
h3 {
 размер шрифта: 2rem; /* 2 раза больше основного текста */
}
h4 {
 размер шрифта: 1.5rem; /* 1 ½ раза больше основного текста */
}
figcaption {
 размер шрифта: 0.75rem; /* ¾ основного текста */
} 
 Увеличьте размер шрифта на больших дисплеях 
 Мы говорили о хорошем размере по умолчанию в качестве отправной точки и об относительных единицах. Давайте объединим все это в одну вещь, которую я считаю  наиболее важной для определения размера вашего текста в адаптивном веб-дизайне.  Размер текста соответствует расстоянию читателя от устройства. Предположим, что чем больше окно просмотра, тем дальше оно от читателя. Ширина 370 пикселей может быть смартфоном, поднесенным ближе к телу. С другой стороны, 19Окно просмотра шириной 20 пикселей может быть внешним монитором или iMac, расположенным на рабочем столе дальше от устройства чтения. Помимо моих грубых рекомендаций, отличным инструментом для этого является калькулятор размера шрифта от leserlich. info.
 Чем больше экран, тем больше должен быть размер шрифта. На меньшем экране используйте значения по умолчанию, может быть, немного меньше. Это означает, что вы можете  увеличить размер шрифта  на определенных шагах. Здесь относительные единицы сверху дают вам большое преимущество. Вы можете масштабировать все пропорционально, изменив размер корня  элемент html  в определенных точках останова. В видео я объясняю это подробно, поэтому здесь этого делать не буду. Также поэкспериментируйте с ним на CodePen и измените там ширину порта просмотра.
 См. перо
 размер шрифта Оливер (@glyphe)
 на КодПене.
 Зависит от шрифта 
 Все это были приблизительные указания, чтобы указать вам правильное направление. Имейте в виду, что это всегда будет зависеть от вашего конкретного приложения,  и выбранного вами шрифта. Из-за дизайна шрифта и сверхсложных технических вещей, называемых вертикальными метриками, вы можете почти потеряться в этой теме, и я мог бы бесконечно рассказывать о дополнительных деталях и исключениях. В конце концов, это не имеет большого значения.
 Раздражает, но факт: оба шрифта имеют одинаковый размер. Слева у Гилла Санса меньшая высота по оси x, из-за чего он кажется меньше, чем справа Арпона Санс с большей высотой по оси x. В этом коротком видео, а также в обзоре  Captura Now    ,   также подробно рассказывается о размере шрифта по отношению к высоте x.
    Судите о том, что видите,  а не о том, что рассчитано. Используйте эту статью как еще один шаг в своем путешествии по типографике, чтобы натренировать свой глазомер, вкус и оценку. Если у вас возникли проблемы с этим, вы всегда можете записаться на индивидуальную коучинговую консультацию!
 Я надеюсь, что эта статья была вам полезна, и вы сможете принять более взвешенное решение, когда дело доходит до размера шрифта.  Вы что-то пропустили или у вас есть вопросы?  С удовольствием отвечу на них в комментариях ниже!
 Размер шрифта в CSS: Полное руководство по выбору размера шрифта 
 JavaScript
  20 августа 2009 г. Пока не попробуешь. Многие разработчики используют силу; они возятся со свойством CSS font-size до тех пор, пока оно не будет выглядеть правильно, только чтобы обнаружить, что оно отличается в другом браузере. Немного понимания может иметь большое значение…
 Свойство font-size 
 Свойство  font-size  может быть установлено для любого тега HTML (даже если он обычно не содержит текстового содержимого, такого как  br  ). Ему могут быть назначены различные абсолютные, относительные параметры или параметры размера длины.
 Элемент унаследует размер шрифта своего родителя, если вы не переопределите его. Это особенно важно, когда вы указываете относительные размеры.
 Ключевые слова абсолютного размера шрифта 
 Доступно несколько ключевых слов абсолютного размера шрифта. Размер шрифта определяется предустановкой браузера, и элемент не наследует размер своего родителя.
 размер шрифта: xx-маленький;
 размер шрифта: x-маленький;
 размер шрифта: маленький;
 размер шрифта: средний;
 размер шрифта: большой;
 размер шрифта: x-большой;
 размер шрифта: xx-крупный;
 Хотя большинство браузеров поддерживают эти ключевые слова, точные размеры будут отличаться. Это довольно грубый метод изменения размера шрифта, и большинство разработчиков обычно избегают его.
 Ключевые слова относительного размера шрифта 
 Доступны два ключевых слова относительного размера шрифта. Размер шрифта соответствует его родительскому элементу:
 размер шрифта: меньше;
 размер шрифта: больше;
 Например, если родительский элемент имеет размер шрифта «средний», значение «крупнее» сделает элемент «крупным». Другие единицы шрифта обычно изменяются примерно в 1,2 раза, но, опять же, стандарта нет, и результаты браузера будут отличаться.
 Абсолютные длины 
 Свойству  font-size  может быть присвоена абсолютная длина:
  мм  : миллиметры, например. 10мм.
  см  : сантиметры, напр. 1 см (= 10 мм).
  в  : дюймы, т.е. 0,39 дюйма (~= 10 мм).
  pt  : точка, где 1 pt обычно считается равным 1/72 дюйма, например. 12пт.
  шт.  : пика, где 1 шт. – 12 пт.
  пикселей  : пиксель, например. 14 пикселей.
 Вообще со всеми этими единицами измерения есть проблемы. Миллиметры, сантиметры и дюймы неточны для экранного носителя. Очки и пики ненадежны, так как системы могут использовать разные  dpi  настроек. Пиксель кажется наиболее подходящим, но он может привести к проблемам с доступностью, поскольку размер текста нельзя изменить в IE.
 Relative Lengths 
 Свойству  font-size  можно присвоить единицу измерения относительно размера шрифта родителя:
  em  : 1em эквивалентен текущему размеру шрифта, поэтому 2em вдвое больше.
  %  : 100% эквивалентно текущему размеру шрифта, поэтому 200% вдвое больше.
  ex  : 1ex соответствует высоте буквы «x» в текущем шрифте.
 Немногие разработчики используют «ex», но это может быть полезно в некоторых ситуациях, когда вам нужны точные размеры шрифта, например. 1ex, а не 0,525em.
 Размеры в процентах и em эквивалентны, например. 50 % = 0,5 em, 100 % = 1 em, 120 % = 1,2 em и т.  д. Некоторые браузеры демонстрируют незначительные различия, но это редко бывает серьезной проблемой. Если вы хотите сохранить каждый байт, вы можете выбрать самое короткое определение, то есть 50% короче 0,5em, а 1em короче 100%.
 Размер текста и масштабирование страницы 
 Здесь возникает дополнительная сложность. Большинство браузеров позволяют пользователю:
 увеличивать или уменьшать размер основного текста (размеры изображения не изменяются)
 увеличить или уменьшить масштаб страницы, чтобы весь текст и графика изменились соответствующим образом, или
 позволяют изменять размер текста и масштабирование страницы.
  Чтобы еще больше усложнить ситуацию, Internet Explorer не позволяет изменять размер текста на элементах, размер шрифта которых определяется в пикселях (px). 
 Если вы дизайнер, переходящий в Интернет с печатного фона, вы смущаетесь, что даете пользователю столько возможностей. Ваш дизайн может быть испорчен, если пользователь увеличит масштаб на 200%, но уменьшит размер текста до 50%. И — нет — вы ничего не можете сделать, чтобы предотвратить это. И вы не должны.
 Рекомендации по размеру шрифта CSS 
 По общему мнению, «em» или «%» — лучшее решение в большинстве ситуаций. Веб-шрифты можно точно масштабировать относительно друг друга, а также поддерживается изменение размера текста в браузере. Я бы также рекомендовал использовать процент  размер шрифта  в теге body; это приводит к лучшему размеру текста в некоторых старых браузерах.
 Есть несколько других рекомендаций, которые я бы посоветовал при разработке сайта:
 перед тестированием сбросьте размер шрифта и масштаб страницы до значений по умолчанию во всех браузерах (это несколько раз меня выручало!)
 попробуйте  разумные  комбинации размера текста и масштабирования страницы в различных браузерах, чтобы текст оставался читаемым.
 Возникали ли у вас когда-либо проблемы с размером шрифта? У вас есть другие советы?
 Поделиться этой статьей 
  Крейг Баклер
 Крейг — внештатный веб-консультант из Великобритании, который создал свою первую страницу для IE2. 0 в 1995 году. С тех пор он пропагандирует стандарты, доступность и лучшие методы HTML5. Он создал корпоративные спецификации, веб-сайты и онлайн-приложения для компаний и организаций, включая парламент Великобритании, Европейский парламент, Министерство энергетики и изменения климата, Microsoft и другие. Он написал более 1000 статей для SitePoint, и вы можете найти его по адресу @craigbuckler.
 
 Размер шрифта: неожиданно сложное свойство CSS 
  размер шрифта  — худшее.
 Это свойство CSS, вероятно, использовалось каждым, кто пишет CSS. Это довольно повсеместно.
 А это  супер  сложно.
 «Но ведь это всего лишь число», — скажете вы. — Как это может быть сложно?
 Я тоже когда-то так думал. А потом я работал над реализацией его для стилуса.
 Stylo — это проект по интеграции системы стилей Servo в Firefox. Система стайлинга обрабатывает
разбор CSS, определение того, какие правила применяются к каким элементам, прогонка через каскад,
и, в конечном итоге, вычисление и назначение стилей отдельным элементам дерева. Это происходит не
только при загрузке страницы, но и всякий раз, когда происходят различные виды событий (включая манипуляции с DOM),
и это нетривиальная часть времени загрузки страницы и взаимодействия.
 Servo находится в Rust и использует безопасный параллелизм Rust во многих местах, в том числе
стайлинг. Stylo может принести эти ускорения в Firefox, наряду с дополнительной безопасностью.
кода на более безопасном системном языке.
 В любом случае, что касается системы стилей, я считаю, что размер шрифта является наиболее сложным
свойство, которое он должен обрабатывать. Некоторые свойства могут быть более сложными, когда речь идет о макете или
рендеринг, но размер шрифта, вероятно, самый сложный в отделе стилей.
 Я надеюсь, что этот пост может дать представление о том, насколько сложной может быть сеть  получить  , а также послужит документацией.
для некоторых из этих сложностей. Я также попытаюсь дать представление о том, как работает система стилей в этом посте.
 Хорошо. Давайте посмотрим, что такого сложного в font-size.
 Основы 
 Синтаксис свойства довольно прост. Вы можете указать его как:
 Длина A (  12px  ,  15pt  ,  13em ,  4in ,  8rem )
 Процент (  50%  )
 Соединение из вышеперечисленного, через calc (  calc(12px + 4em + 20%)  )
 Абсолютное ключевое слово ( средний ,  маленький ,  большой ,  x-большой  и т. д.)
 Относительное ключевое слово ( большее ,  меньшее )
 Первые три являются общими среди множества свойств, связанных с длиной. Ничего необычного в синтаксисе.
 Следующие два интересны. По сути, абсолютные ключевые слова сопоставляются с различными значениями пикселей и соответствуют
результат    (например,  size=3  совпадает с  font-size: medium  ). Фактическое значение  , на которое они сопоставляются
не так просто, и я вернусь к этому позже в этом посте.
 Относительные ключевые слова в основном увеличивают или уменьшают размер. Однако механизм масштабирования также был сложным.
это изменилось. Я тоже до этого доберусь.
 em и rem единиц 
 Первые:  em  единиц. Одна из вещей, которую вы можете указать в  любом свойстве CSS на основе длины , — это значение с  em  или  rem .
Ед. изм.
  5em  означает «в 5 раз больше размера шрифта   элемента, к которому это применяется».  5rem  означает «в 5 раз больше размера шрифта корневого элемента»
 Следствием этого является то, что размер шрифта необходимо вычислять перед всеми остальными свойствами (ну, не совсем, но мы доберемся до этого! )
чтобы он был доступен в это время.
 Вы также можете использовать  em  единиц внутри  размера шрифта . В этом случае он вычисляется относительно размера шрифта  родительского элемента , поскольку
вы не можете использовать размер шрифта элемента для вычисления самого себя. (Это идентично использованию процентной единицы)
 Минимальный размер шрифта 
 Браузеры позволяют вам установить «минимальный» размер шрифта в своих настройках, и текст не будет масштабироваться ниже этого размера. Это полезно для тех, у кого
проблемы с просмотром мелкого текста.
 Однако это не влияет на свойства, которые зависят от размера шрифта через  em  единиц. Поэтому, если вы используете минимальный размер шрифта, 
  будет иметь очень маленькую высоту (что вы заметите по цвету),
но текст будет обжат до минимального размера.
 На самом деле это означает, что вам нужно отслеживать  два  отдельных вычисленных значения размера шрифта. Есть одно значение, которое
используется для фактического определения размера шрифта, используемого для текста, и одно значение, которое используется всякий раз, когда системе стилей требуется
знать размер шрифта (например, чтобы вычислить  em  unit. )
 Это немного усложняется, когда задействован рубин. В идеографическом письме (обычно ханьское
и письма на основе хань, такие как кандзи или ханджа) иногда полезно знать произношение
каждого символа над ним в фонетическом письме для помощи читателям, не владеющим этим
сценарий, и это известно как «рубин» («фуригана» на японском языке). Поскольку эти сценарии идеографичны,
Нередко учащиеся знают произношение слова, но понятия не имеют, как его написать.
Примером может быть  日  に  本  ほん   , то есть 日本 («нихон»,
то есть «Япония») в кандзи с рубиновым にほん в фонетическом письме хирагана над ним.
 Как вы, вероятно, видите, фонетический рубиновый текст имеет меньший размер шрифта (обычно 50% шрифта).
размер основного текста ¹ ). Поддержка минимального размера шрифта  соответствует  этому и гарантирует, что если ruby
должен быть  50%  размера текста, минимальный размер шрифта для рубина  50%  размера
исходный минимальный размер шрифта. Это позволяет избежать того, чтобы зажатый текст выглядел как , , , , ,  (где оба устанавливаются на
того же размера), что довольно уродливо.
 Масштаб текста 
 Firefox дополнительно позволяет масштабировать текст только при масштабировании. Если у вас есть проблемы с чтением мелких вещей, здорово
иметь возможность просто взорвать текст на странице, не увеличивая масштаб всей страницы (это означает, что вам нужно прокручивать
вокруг много).
 В этом случае  em  единиц других свойств  до  также увеличиваются. В конце концов, они должны быть относительно шрифта текста.
размер (и может иметь какое-то отношение к тексту), поэтому, если этот размер изменился, они должны измениться.
 (Конечно, этот аргумент можно применить и к минимальному размеру шрифта. У меня нет ответа, почему это не так.)
 На самом деле это довольно просто реализовать. При вычислении абсолютных размеров шрифта (включая
ключевые слова), масштабируйте их, если включено масштабирование текста. Во всем остальном продолжайте как обычно.
 Масштабирование текста также отключено в пределах  элементов  , что приводит к некоторой хитрости.
 Интерлюдия: как работает система стилей 
 Прежде чем я продолжу, вероятно, стоит дать краткий обзор того, как все работает.
 Ответственность за систему стилей состоит в том, чтобы принимать код CSS и дерево DOM и назначать вычисляемые стили каждому элементу.
 Здесь есть различие между «указанным» и «вычисленным». «указанные» стили имеют формат
вы указываете в CSS, тогда как вычисляемые стили — это те, которые прикрепляются к элементам, отправляются в
расположение и унаследовано от. Заданный указанный стиль может вычисляться до разных значений при применении к
разные элементы.
 Таким образом, хотя вы можете указать    width: 5em  , будет вычислено что-то вроде  width: 80px  . Вычисляемые значения обычно представляют собой
очищенная форма указанного значения.
 Система стилей сначала анализирует CSS, создавая набор правил, обычно содержащих объявления (объявление похоже на  width: 20%;  ; т. е. имя свойства и указанное значение)
 Затем он проходит через дерево в порядок сверху вниз (параллелизуется в Stylo), выясняя, какие объявления  применить  к каждому элементу
и в каком порядке – одни объявления имеют приоритет над другими. Затем он будет вычислять каждое соответствующее объявление в соответствии со стилем элемента (и родительским стилем, среди других битов информации),
и сохраните это значение в «вычисленном стиле» элемента.
 Gecko и Servo сделали несколько оптимизаций, чтобы избежать дублирования работы ² . Есть
фильтр Блума для быстрой проверки, применяются ли селекторы глубокого потомка к поддереву. Существует «правило
дерево», которое помогает кэшировать усилия по определению применимых объявлений. Вычисляемые стили
ссылки подсчитываются и совместно используются очень часто (поскольку состояние по умолчанию — наследование от родителя или
из стиля по умолчанию).
 Но в конечном счете суть происходящего такова.
 Значения ключевых слов 
 Хорошо, здесь все становится сложнее.
 Помните, я сказал, что  размер шрифта: средний  соответствует значению?
 Так что же он отображает?
 Ну, оказывается, зависит от семейства шрифтов. Для следующего HTML:
 text
текст
 
 вы получаете (codepen)
 текст
текст
, где первый вычисляет размер шрифта 13 пикселей, а второй вычисляет размер шрифта
16 пикселей. Вы можете проверить это на панели вычисляемого стиля ваших инструментов разработки или с помощью  getComputedStyle()  .
 Я  думаю,  причина этого в том, что моноширинные шрифты имеют тенденцию быть шире, поэтому размер шрифта по умолчанию (средний)
масштабируется так, чтобы они имели одинаковую ширину, и все остальные размеры шрифта ключевых слов также смещаются. Конечный результат примерно такой:
 Firefox и Servo имеют матрицу, которая помогает получить значения для всех абсолютных
ключевые слова размера шрифта, основанные на «базовом размере» (т. е. рассчитанном из  размеров шрифта: средний ). Фактически,
В Firefox есть три таблицы для поддержки некоторых устаревших вариантов использования, таких как режим причуд (у Servo есть
еще не добавлена поддержка этих таблиц). Мы запрашиваем у других частей браузера, какой «базовый размер»
основан на языке и семействе шрифтов.
 Подождите, а при чем здесь язык? Как язык влияет на размер шрифта?
 Получается, что базовый размер зависит от семейства шрифтов  и  от языка, и это можно настроить.
 Как Firefox, так и Chrome (используя расширение) фактически позволяют настраивать используемые шрифты для каждого языка, , а также размер шрифта по умолчанию (базовый)  .
 Это не так непонятно, как может показаться. Системные шрифты по умолчанию часто очень уродливы для нелатинских языков.
с помощью скриптов. У меня установлен отдельный шрифт, который создает более привлекательные лигатуры деванагари.
 Точно так же некоторые сценарии просто сложнее латиницы. Мой размер шрифта по умолчанию для деванагари
установите 18 вместо 16. Я начал изучать китайский язык и также установил размер шрифта на 18. глифы ханзи
могут быть довольно сложными, и я все еще изо всех сил пытаюсь их выучить (а позже распознать). Для этого отлично подходит крупный размер шрифта.
 Впрочем, это не сильно усложняет ситуацию. Это означает, что семейство шрифтов должно быть
вычисляется перед font-size, который уже должен быть вычислен перед большинством других свойств.
язык, который можно установить с помощью  lang  Атрибут HTML, внутренне обрабатывается как свойство CSS
Firefox, так как он наследуется, и его также нужно вычислить раньше.
 Не так уж плохо. Уже.
 А вот и кикер. Эта  зависимость  от языка и семьи  наследует  .
 Быстро, какой размер шрифта внутреннего  div  ?
  
    размер шрифта 16px
     
        размер шрифта ??
    

 
 Для обычного унаследованного свойства CSS ³ , если у родителя есть вычисленное значение  16px  ,
и для дочернего элемента не указаны дополнительные значения, дочерний элемент унаследует значение  16px  .  Где  родитель получил это вычисленное значение, не имеет значения.
 Здесь  размер шрифта  «наследует» значение  13px  . Вы можете увидеть это ниже (codepen):
 размер шрифта 16px
 размер шрифта ??
 В основном, если вычисленное значение получено из ключевого слова, всякий раз, когда семейство шрифтов или язык
изменить, размер шрифта пересчитывается из исходного ключевого слова с новым семейством шрифтов и языком.
 Причина, по которой это существует, заключается в том, что в противном случае разные размеры шрифта все равно бы не работали! Размер шрифта по умолчанию
is  medium  , поэтому в основном корневой элемент получает размер шрифта : средний , и все элементы наследуются от него. Если вы измените
для моноширинного или другого языка в документе вам нужно пересчитать размер шрифта.
 Но это еще не все. Это даже наследует  через относительные единицы  (не в IE).
  
    размер шрифта 16px
     
        размер шрифта 14,4 пикселя (16 * 0,9)
         
            размер шрифта 11.7px! (13*0,9)
        
    

 
 (кодовый код)
 размер шрифта 16px
 размер шрифта 14,4 пикселя (16 * 0,9)
 размер шрифта 11.7px! (13 * 0.9)
 Таким образом, мы фактически наследуем размер шрифта  0.9*medium , когда наследуем от второго div, а не  14.4px .
 Другой способ взглянуть на это так: всякий раз, когда меняется семейство шрифтов или язык, вы должны пересчитывать размер шрифта, как если бы язык и семейство  всегда были такими  вверх по дереву.
 Код Firefox использует обе эти стратегии. Оригинальная система стиля Gecko справляется с этим фактически
вернуться к вершине дерева и пересчитать размер шрифта, как если бы язык/семья были
другой. Я подозреваю, что это неэффективно, но дерево правил, похоже, делает это слегка
эффективнее
 Servo, с другой стороны, хранит некоторые дополнительные данные на стороне при вычислениях, данные, которые копируются в дочерний элемент. Это в основном
сохраняет эквивалент фразы «Да, этот шрифт был рассчитан по ключевому слову. Ключевым словом было  средний , после чего мы применили к нему коэффициент 0,9». ⁴
 В обоих случаях это приводит к куче сложностей во всех  других  сложностях размера шрифта, так как через это их нужно тщательно сохранять.
 В Servo  большая часть  обрабатывается с помощью пользовательских каскадных функций для размера шрифта.
 Больше/меньше 
 Итак, я упомянул, что  размер шрифта: больший  и  меньший  масштабируют размер, но не упомянул в какой дроби.
 Согласно спецификации, если размер шрифта в настоящее время соответствует значению абсолютного размера ключевого слова (средний/большой/и т. д.),
вы должны выбрать значение размера следующего/предыдущего ключевого слова соответственно.
 Если  между  двумя, найти ту же точку между двумя следующими/предыдущими размерами.
 Это, конечно, должно хорошо сочетаться со странным наследованием размеров шрифта ключевых слов, упомянутым ранее. В модели Гекко это не так уж сложно,
так как Gecko все равно пересчитывает вещи. В модели Servo нам пришлось бы хранить последовательность приложений из  больших,  /  меньших,  и относительных.
единиц, вместо того, чтобы хранить только относительную единицу.
 Кроме того, при вычислении этого во время масштабирования текста необходимо уменьшить масштаб, прежде чем искать его в таблице, а затем изменить масштаб.
 В общем, куча сложностей с небольшим выигрышем — оказывается, только Gecko действительно следовал здесь спецификации! Все остальные браузерные движки
здесь используются простые соотношения.
 Итак, мое решение здесь состояло в том, чтобы просто удалить это поведение из Gecko. Это упростило вещи.
 MathML 
 Firefox и Safari поддерживают MathML, язык разметки для математики. В наши дни он мало используется в Интернете, но он существует.
 MathML имеет свои сложности, когда речь идет о размере шрифта. В частности,  scriptminsize  ,  scriptlevel  и  scriptsizemultiplier  .
 Например, в MathML текст в числителе или знаменателе дроби или текст надстрочного индекса в 0,71 раза больше текста за его пределами. Это потому что
значение по умолчанию  scriptsizemultiplier  для элементов MathML равно 0,71, и все эти конкретные элементы получают уровень сценария по умолчанию  +1  .
 По сути,  scriptlevel=+1  означает «умножить размер шрифта на  scriptsizemultiplier  ”, и  scriptlevel=-1  для деления. Это можно указать с помощью HTML-атрибута  scriptlevel  в элементе  mstyle . Вы можете
аналогичным образом настройте (унаследованный) множитель с помощью HTML-атрибута  scriptsizemultiplier  и минимальный размер с помощью  scriptminsize  .
 Итак, например:
  ${текст}^{маленький верхний индекс}$ 

<математика>
    текст
    <уровень сценария mstyle=+1>
        маленький
        <уровень сценария mstyle=+1>
            меньше
            
                снова маленький
            
        
    

 
 будет отображаться как (вам понадобится Firefox, чтобы увидеть обработанную версию, Safari также поддерживает MathML, но поддержка не так хороша):
 textsmall superscript 
 text small  меньше  снова меньше 
 (codepen)
 Так что это не так уж плохо. Как будто  scriptlevel  — это странная единица измерения  em . Ничего страшного, мы уже знаем, как с ними бороться.
 За исключением того, что у вас также есть  scriptminsize  . Это позволяет установить минимальный размер шрифта  для изменений, вызванных  уровнем сценария   .
 Это означает, что  scriptminsize  гарантирует, что  scriptlevel  никогда не вызовет изменений, которые сделают шрифт меньше минимального размера,
но он будет игнорировать случаи, когда вы намеренно указываете единицу измерения  em  или значение в пикселях.
 Здесь уже присутствует небольшая сложность,  scriptlevel  теперь становится другим
это настраивает, как  размер шрифта наследует . К счастью, в Firefox/Servo внутренне  scriptlevel  (как и  scriptminsize  и  scriptsizemultiplier  ) также обрабатывается как свойство CSS, что означает, что мы
можно использовать ту же структуру, которую мы использовали здесь для семейства шрифтов и языка — вычислить скрипт
свойства перед размером шрифта, и если установлен  scriptlevel , принудительно пересчитать размер шрифта, даже если
Сам размер шрифта не был установлен.
 Интерлюдия: ранние и поздние вычисленные свойства 
 В Servo способ обработки зависимостей в свойствах заключается в наличии набора
набор «поздних» свойств (которые могут зависеть от ранних свойств). Мы повторяем
объявления дважды, один раз для поиска ранних свойств и один раз для поздних. Однако теперь у нас есть
довольно сложный набор зависимостей, где размер шрифта должен рассчитываться после языка, семейства шрифтов,
и свойства скрипта, но прежде всего, что связано с длинами. Кроме того, семейство шрифтов
должен рассчитываться после всех других ранних свойств из-за другой сложности шрифта, которую я здесь не рассматриваю.
 Способ, которым мы справились с этим, состоит в том, чтобы извлечь font-size и font-family во время ранних вычислений,
но не занимайтесь ими до тех пор, пока не будет выполнено раннее вычисление.
 На этом этапе мы сначала обрабатываем отключение масштабирования текста, а затем разбираемся со сложностями семейства шрифтов.
 Затем мы вычисляем семейство шрифтов. Если был указан размер шрифта, мы просто вычисляем его. Если это
не было, но было указано семейство шрифтов, язык или уровень скрипта, мы принудительно вычисляем как унаследованные, которые обрабатывают все ограничения.
 Почему scriptminsize усложняется 
 В отличие от другого «минимального размера шрифта», использование единицы  em  в любом свойстве будет вычислять
длина с зажатым значением, а не значение «если бы ничего не было зажато», когда размер шрифта
был зажат scriptminsize. Итак, на первый взгляд кажется, что справиться с этим просто; Только
учитывайте минимальный размер сценария при принятии решения о масштабировании из-за уровня сценария.
 Как всегда не все так просто 😀:
  $20 пикселей 15 пикселей 11,25 пикселей будет 8,4375, но зажато на 10px будет 6,328125, но ограничено 10px Это не 10px/0.$  75=13.3, а все еще зажато на 10px.
                                        
                                            Это не 10px/0.75=13.3, а все еще зажато на 10px.
                                            
                                                Это снова 11,25 пикселей.
                                                    
                                                        Это снова 15px
                                                    
                                            
                                        
                                
                        
                
        
    


 
 (codepen)
 В принципе, если повышать уровень в кучу раз после достижения минимального размера, уменьшать его на единицу сразу не следует
вычислить  мин. размер/множитель  . Это сделало бы вещи асимметричными; что-то с уровнем сетевого сценария  +5  должно
иметь тот же размер, что и что-то с уровнем сетевого сценария  +6 -1  , при условии, что множитель не изменился.
 Итак, происходит то, что уровень скрипта вычисляется по размеру шрифта , как будто scriptminsize никогда не применялся ,
и мы используем этот размер только в том случае, если он больше минимального размера.
 Дело не только в отслеживании уровня скрипта, на котором произошло зажатие — множитель мог измениться
в процессе, и вы должны следить за этим тоже. Таким образом, это приводит к созданию  еще одного значения размера шрифта для наследования  .
 Подводя итог, можно сказать, что сейчас мы имеем  четыре  наследуемых различных понятия размера шрифта:
Основной размер шрифта, используемый стилем
 «Реальный» размер шрифта, т.е. основной размер шрифта, но ограниченный минимальным размером
 (только в сервоприводе) Размер «ключевого слова»; то есть размер, сохраненный как ключевое слово и соотношение, если он был получен из ключевого слова
 Размер «скрипт без ограничений»; размер шрифта, как будто scriptminsize никогда не существовало.
 Другая сложность заключается в том, что следующее должно работать:
  $5 пикселей 6,666 пикселей$ 
 (codepen)
 В принципе, если вы уже были ниже scriptminsize, уменьшение уровня скрипта (для увеличения размера шрифта) не должно быть зажато, так как тогда вы получите что-то слишком большое.
 Это в основном означает, что вы применяете scriptminsize только в том случае, если вы применяете уровень скрипта к значению  большему, чем  минимальный размер скрипта.
 В Servo вся обработка MathML завершается этой замечательной функцией, которая является скорее комментарием, чем кодом, и
некоторый код в функциях рядом с ним.
 Вот и все.  размер шрифта  на самом деле довольно сложен. Многие веб-платформы имеют скрытые сложности, подобные этой, и всегда интересно столкнуться с ними.
 (Возможно, меньше удовольствия, когда мне приходится их реализовывать 😂)
  Спасибо mystor, mgattozzi, bstrie и projektir за рассмотрение черновиков этого поста 
 Интересно, что в Firefox это число составляет 50% для всех ruby , за исключением , когда используется тайваньский мандарин (где оно составляет 30%). Это связано с тем, что на Тайване используется фонетический шрифт бопомофо, и каждый глиф хань может быть представлен максимум 3 буквами бопомофо. Таким образом, можно выбрать разумный минимальный размер, чтобы рубин никогда не увеличивал размер глифа под ним. С другой стороны, пиньинь может содержать до шести букв, а хирагана — до (как мне кажется) 5, и соответствующее масштабирование «без переполнения» будет слишком маленьким. Поэтому установка их поверх глифа не рассматривается, и вместо этого мы выбираем больший размер шрифта для лучшей читабельности. Кроме того, рубин Bopomofo часто устанавливается сбоку от глифа, а не сверху, и 30% работает там лучше. (h/t @upsuper за указание на это) ↩
 Другие браузерные движки имеют другие оптимизации, просто я с ними менее знаком ↩
 Некоторые свойства наследуются, некоторые «сбрасываются». Например,  font-family  наследуется — дочерние элементы наследуют семейство шрифтов от родителя, если не указано иное. Однако  не преобразует , если вы преобразуете элемент, который не преобразует далее дочерние элементы. ↩
 Это не обработает  calc  s, что мне нужно исправить. Исправить это тривиально, вы сохраняете абсолютное смещение в дополнение к отношению. ↩
 Как изменить размер шрифта в WordPress (используя 2 метода) 
 Вордпресс  Расширенный
 30 августа 2022 г.
 Ричард Б.
 3 минуты чтения
 Начать бесплатный 7-дневный курс электронной почты по WordPress
 Изменить размер шрифта в WordPress очень просто. В этой статье вы узнаете все, что вам нужно знать. Мы рассмотрим два метода — установка плагина и использование CSS.
 WordPress известен своим удобным редактированием записей. Как и ваш любимый текстовый редактор, он предлагает множество опций. Вы можете легко редактировать контент, используя раскрывающееся меню для установки заголовков и абзацев.
 Обратите внимание, что структура вашего контента важна как для посетителей, так и для поисковой оптимизации. Наличие хорошей структуры заголовка помогает поисковым системам сканировать основные темы ваших сообщений, особенно длинных. Это поможет добиться лучшего рейтинга на страницах результатов поисковой системы.
 Последняя версия WordPress поставляется с редактором Gutenberg. Мы также покажем вам, как изменить размер шрифта с помощью этого инструмента.
 Изменение размера шрифта с помощью расширенного плагина TinyMCE 
 TinyMCE Advanced — это бесплатный плагин, позволяющий легко выбрать нужный размер шрифта. Этот плагин предоставляет вам классическую панель инструментов редактора в новом редакторе Gutenberg.
 Во-первых, вам необходимо установить и активировать плагин. Затем вы можете перейти к настройкам  страница. Вы найдете две вкладки: редактор блоков  (Gutenberg)  и классический редактор  (TinyMCE) .
 Если вы хотите использовать только классический редактор, включите  Замените редактор блоков на классический редактор  в разделе  Дополнительные настройки  . Но оставьте этот флажок снятым, чтобы использовать оба редактора одновременно.
 Вот шаги по изменению шрифта с помощью этого плагина:
 Перейти  создать новый пост  или отредактировать существующий. Вы увидите классический редактор абзацев. 
 Выделите строки текста, которые вы хотите изменить, затем выберите размер шрифта. 
 Результат будет выглядеть следующим образом: 
 Использование CSS — классический способ 
 Хотя описанный выше метод отлично подходит для новичков, классический способ требует CSS и может быть немного сложнее.
 Однако при использовании плагина или редактора WordPress по умолчанию вам необходимо внести изменения для каждой записи и страницы. Использование CSS изменяет размер шрифта для всего сайта.
 Изменение размера шрифта с помощью CSS требует добавления строк кода. Сделать это можно через редактор  или Customiser . Но мы рекомендуем настройщик, так как это более простой метод.
 Перейдите на панель управления WordPress, затем  Внешний вид  >  Настроить  . 
 Выберите  Дополнительный CSS  в WordPress. 
 Вы можете добавить строки кодов в поле слева.
 Чтобы изменить весь шрифт: тело {
размер шрифта: 1.25rem;
}
 
 Чтобы изменить шрифт абзацев: р {
размер шрифта: 25px;
} 
 Чтобы изменить шрифты определенных заголовков: ч3 {
размер шрифта: 2. 5em;
} 
 Чтобы изменить размер шрифта боковой панели: .sidebar li {
размер шрифта: 12px;
} 
 Чтобы настроить шрифт нижнего колонтитула: .нижний колонтитул {
размер шрифта: 150%;
} 
 Чтобы изменить шрифт для определенных размеров экрана: html {
размер шрифта: 18 пикселей;
}
@media (минимальная ширина: 900 пикселей) {
HTML {
размер шрифта: 20px;
}
} 
 Стили CSS позволяют четырем различным единицам измерения размера текста:
  Em   (em)  . Это единица, используемая в документах веб-медиа. 1em равен 12 очкам.
  пикселей   (пикселей)  . Это единица, используемая в экранных медиа. 1px равен 1 точке на экране компьютера.
  Точки   (pt)  . Этот блок предназначен для традиционных печатных СМИ. 1 пункт равен 1/72 дюйма.
  Проценты   (%)  . По умолчанию установлено значение 100%, которое изменится после увеличения или уменьшения масштаба.
 Использование редактора Gutenberg 
 Как упоминалось ранее, Gutenberg — это новое дополнение WordPress. Он интегрирован в CMS, чтобы упростить редактирование мультимедийных сообщений.
 Заметным изменением является использование блоков. Блоки позволяют перетаскивать любые медиафайлы в свои посты — как и на любой другой платформе для создания страниц.
 Вот как выглядит блок:
 Чтобы изменить размер шрифта с помощью редактора Gutenberg, выполните следующие простые шаги:
 Выберите запись, которую хотите отредактировать, или просто  Добавить новую. 
 Нажмите на блок, содержащий тексты, которые вы хотите изменить, затем выберите номер вручную. 
 Или вы можете установить параметры справа:  маленький  ,  нормальный  ,  средний  ,  большой  и  большой. 
 
 Очень удобно, не правда ли?
 Заключение 
 WordPress предлагает отличные возможности для настройки, включая настройку размера шрифта. Идеальный размер шрифта делает ваш контент более привлекательным и удобным для восприятия. Эти корректировки невероятно легко сделать.
 Новички могут установить плагин, а пользователи с некоторыми знаниями CSS могут настраивать темы вручную. Удачной настройки.
 Узнайте о других передовых технологиях WordPress 
 Как добавить пользовательский шрифт в WordPress 
 Как увеличить лимит памяти WordPress 
 Как удалить боковую панель в WordPress 
 Как изменить длину выдержки в WordPress 
 Полное руководство по A/B-тестированию WordPress 
 Как скрыть заголовок страницы в WordPress
 Ричард — разработчик программного обеспечения для WordPress и эксперт по системам управления контентом. Когда он не играет с кодом, Ричард наслаждается хорошим кино и крафтовым пивом.
 Еще от Ричарда Б.
 Размер шрифта CSS 
 Следуя статье, опубликованной на прошлой неделе, в которой я кратко обсуждал размер пикселей CSS, я решил изучить различные способы объявления размера шрифта с помощью CSS.
 Знакомство с единицами измерения 
 Существует несколько различных способов объявления размера шрифта в CSS. Вообще говоря, единицы попадают в одну из двух категорий — абсолютные и относительные.
  Абсолютные единицы  фиксированы и (в основном) относятся к некоторым физическим измерениям. Как только они объявлены, их размер нельзя изменить, изменив размер шрифта какого-либо другого элемента.
  Относительные единицы  не имеют объективного измерения. Вместо этого их фактический размер определяется размером родительского элемента. Это означает, что их размер  можно изменить , изменив размер этого зависимого элемента.
 Вот краткий обзор некоторых блоков -
 Блок  Тип  Описание
 пикселей  Абсолют  1 «пиксель области просмотра»
 Абсолют  1 пункт равен 1/72 дюйма
 шт.  Абсолют  1 пика равна 12 очкам
 %  Родственник  Относительно размера шрифта родительского элемента
 эм  Родственник  Относительно размера шрифта родительского элемента
 рем  Родственник  (корень em) Относительно  html  размер шрифта
 ключевое слово  Родственник  xx-маленький, x-маленький, маленький, средний, большой, x-большой, xx-большой
 фольксваген  Родственник  1/100 ширины окна просмотра
 вх  Родственник  1/100 высоты окна просмотра
 вмин  Родственник  1/100 меньшего размера области просмотра (высота или ширина)
 вмакс  Родственник  1/100 большего размера области просмотра (высоты или ширины)
 Здесь вы можете увидеть исчерпывающий список единиц измерения, но я сосредоточусь на тех единицах, которые, по моему мнению, являются наиболее важными: px, pt, %, em, rem и vw.
 Какая разница? 
 Различие между этими единицами может быть трудно понять концептуально, поэтому лучше продемонстрировать их различия на практических примерах.
 Пример 1. Настройки по умолчанию 
 В пустом HTML-документе без указания размера шрифта используются настройки по умолчанию. В большинстве браузеров размер шрифта по умолчанию для тегов  html  и  body  составляет 100%. Это соответствует следующему -
 100% = 1em = 1rem = 16px = 12pt
 Это означает, что если вы установите размер шрифта одного 
  на 100%, а другого 
  на 16 пикселей, они будут отображаться на экране одинакового размера. Вы можете увидеть это продемонстрировано здесь -
 Пример 2 - Абсолютные и относительные единицы 
 Разницу между абсолютными и относительными единицами можно выделить, изменив размер шрифта  html . Если мы установим  html { font-size: 200% }  , это повлияет только на 
  с с относительными единицами размера шрифта.
 Это ключевое преимущество использования относительных единиц. Имея возможность так легко масштабировать размеры шрифта, вы можете создать действительно адаптивный сайт, просто изменив размер шрифта  html . У Макса Ластера есть отличный пример этого здесь.
 Пример 3 — rem против em (и %) 
 Единица Em (и %) работает, вычисляя текущий размер шрифта на основе размера шрифта родительского элемента. Например -
 html {
  размер шрифта: 100% /* =16px */
}
тело {
  размер шрифта: 2em; /* =32px */
}
п {
  размер шрифта: 1em; /* =32px */
  /* размер шрифта: 0.5em; =16px */
}
 
 Поскольку  p  наследуется от  body  , который наследуется от  html  , абзацы, заданные в единицах em и %, получаются в два раза больше, чем мы, возможно, планировали.
 При использовании единиц em для элемента необходимо учитывать размер шрифта всех родительских элементов. Как видите, это может довольно быстро стать сложным и запутанным.
 Решение этой проблемы рем. rem рассчитывается только на основе размера шрифта  html , а не родительского элемента. Например -
 HTML {
  размер шрифта: 100% /* =16px */
}
тело {
  размер шрифта: 2rem; /* =32px */
}
п {
  размер шрифта: 1rem; /* =16 пикселей */
}
 
 Использование rem позволяет вам иметь возможности масштабирования em и %, но без необходимости иметь дело с проблемами вложенности.
 Пример 4. Определение ширины окна просмотра 
 Модуль vw, новый модуль CSS3, использует ширину окна просмотра для расчета размера шрифта. Это позволяет более гибко реагировать на изменение размера шрифта.
 Хотя это кажется отличным модулем для адаптивного дизайна, лично я не являюсь его поклонником. Это не дает мне достаточного контроля над размером шрифта, который почти всегда оказывается слишком большим или слишком маленьким.
 Мой метод 
 До того, как я провел это исследование, я просто использовал пиксели для установки размеров шрифта. Это связано с тем, что в настоящее время большинство браузеров позволяют пользователю увеличивать масштаб, если текст слишком мал для него, и поэтому проблем с доступностью нет.
 Однако я нашел этот метод довольно ограниченным с точки зрения возможности масштабирования. Хотя мой размер шрифта выглядит хорошо на средних и маленьких экранах, его можно было бы лучше оптимизировать для больших. Даже если у пользователей есть возможность увеличить масштаб, мы не хотим, чтобы они это делали.
 Поэтому мое решение состоит в том, чтобы работать с rem (используя пиксели в качестве запасного варианта).
 HTML {
  размер шрифта: 62,5%; /* устанавливает базовый шрифт в 10px для упрощения математических вычислений */
}
тело {
  размер шрифта: 16px;
  размер шрифта: 1.6rem;
  /* устанавливает размер по умолчанию, чтобы убедиться, что на самом деле ничто не равно 10px */
}
ч2 {
  размер шрифта: 32px;
  размер шрифта: 3.2rem;
}
 
 Это позволяет мне увеличить размер шрифта, просто написав -
 @media screen и (min-width: 1280px) {
  HTML {
    размер шрифта: 100%;
  }
}
 
 Этот метод использует пиксели в качестве резервной единицы, поскольку rem не поддерживается в IE8 и более ранних версиях.

Блок	Тип	Описание
пикселей	Абсолют	1 «пиксель области просмотра»
	Абсолют	1 пункт равен 1/72 дюйма
шт.	Абсолют	1 пика равна 12 очкам
%	Родственник	Относительно размера шрифта родительского элемента
эм	Родственник	Относительно размера шрифта родительского элемента
рем	Родственник	(корень em) Относительно `html` размер шрифта
ключевое слово	Родственник	xx-маленький, x-маленький, маленький, средний, большой, x-большой, xx-большой
фольксваген	Родственник	1/100 ширины окна просмотра
вх	Родственник	1/100 высоты окна просмотра
вмин	Родственник	1/100 меньшего размера области просмотра (высота или ширина)
вмакс	Родственник	1/100 большего размера области просмотра (высоты или ширины)