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

Содержание

html — Задать размер шрифта на веб-странице такого же размера как в Word

Вопрос задан 4 года 11 месяцев назад

Изменён 1 год 1 месяц назад

Просмотрен 734 раза

Есть некоторый веб-сервис, генерирующий при помощи WkHtmlToPdf PDF файл из html-страницы.

Одно из требований к документу (а это некоторый формуляр, утверждённый госорганом), чтобы документ выглядел так же, как и распечатка из MS Word.

И вот тут я упёрся в одну проблему. Документ набран 12тым шрифтом, я на автопилоте написал:

<html>
<head>
    <meta charset="utf-8" />
    <style>
body {
    font-family: "Times New Roman", serif;
    font-size: 12pt;
}
    </style>
</head>
<body>
<!-- page 1 -->
<p>УТВЕРЖДЕН</p>
. ..
<div>&nbsp;</div>
<!-- page 2 -->

И… споткнулся о то, что размер шрифта при распечатке не соответствует размеру шрифта, распечатанного из Ms Word.

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

html
css
вёрстка

font-size: 12pt; — Вам использовать ни в коем случаи нельзя. Поскольку данная величина зависит от плотностей пикселей, а она у разных браузерах разная (Считается по разному для Хрома и Сафари так точно ). Поэтому смотрите в сторону px em rem

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

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

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

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

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

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

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

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

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

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

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

Тег <font>

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

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

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

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

<font size="значение размера шрифта">Здесь располагается текст</font>

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

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

<font size="1">Размер шрифта 1</font>

<font size="2">Размер шрифта 2</font>

<font size="3">Размер шрифта 3</font>

<font size="4">Размер шрифта 4</font>

<font size="5">Размер шрифта 5</font>

<font size="6">Размер шрифта 6</font>

<font size="7">Размер шрифта 7</font>

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

<p><font size="+3">Здесь располагается текст</font></p>

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

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

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

Тег <span>

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

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

<span>Здесь располагается текст</span>

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

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

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

В таком случае целесообразно пользоваться тегами <h2> — <h6>. Тег <h2> — это заголовок первого уровня. В браузере он будет отображаться наиболее крупным, а теги от <h3> до <h6> используются для выделения подзаголовков.

Пример кода:

<h2>Заголовок первого уровня</h2>

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

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

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

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

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

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

Тег нижнего колонтитула HTML

❮ Назад Полный справочник HTML Далее ❯

Пример

Нижний колонтитул в документе:

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

Определение и использование

<нижний колонтитул> 9Тег 0023 определяет нижний колонтитул документа или раздела.

Элемент

  обычно содержит:
 информацию об авторстве
 авторское право
информация
 контактная информация
 карта сайта
 вернуться к началу ссылки
 сопутствующие документы
 В одном документе может быть несколько элементов 
 .
 Советы и примечания 
  Совет:  Контактная информация внутри  Элемент
  должен находиться внутри
Тег <адрес>.
 Поддержка браузера 
 Числа в таблице указывают первую версию браузера, которая полностью поддерживает элемент.
   Элемент 
 <нижний колонтитул>  5,0  9,0  4,0  5,0  11. 1
 Глобальные атрибуты 
 Тег 
  также поддерживает глобальные атрибуты в HTML.
 Атрибуты событий 
 Тег 
  также поддерживает атрибуты событий в HTML.
 Дополнительные примеры 
 Пример 
 Используйте CSS для стилизации нижнего колонтитула:
 
 
 
 
 
Автор: Хеге Рефснес
 
   [email protected]
 
  
 
 Попробуйте сами »
 Связанные страницы 
 Ссылка HTML DOM: объект нижнего колонтитула
 Настройки CSS по умолчанию 
 Большинство браузеров будут отображать элемент 
  со следующими значениями по умолчанию:
 нижний колонтитул { 
   display: block; 
 }
 ❮ Предыдущий
Полный справочник HTML
Следующий ❯
 
 НАБОР ЦВЕТА 
 Лучшие учебники 
 Учебное пособие по HTML 
 Учебное пособие по CSS 
 Учебное пособие по JavaScript 
 Учебное пособие 
 Учебное пособие по SQL 
 Учебное пособие по Python 
 Учебное пособие по W3. CSS 
 Учебное пособие по Bootstrap 
 Учебное пособие по PHP 
 Учебник по Java 
 Учебник по C++ 
 Учебник по jQuery 
 Основные ссылки 
 HTML Reference 
 CSS Reference 
 JavaScript Reference 
 SQL Reference 
 Python Reference 
 W3.CSS Reference 
  Bootstrap Reference 
 PHP Reference 
 HTML Colors 
 Java Reference 
 Angular Reference 
 jQuery Reference 
 Top1s
Примеры HTML 

 Примеры CSS 
 Примеры JavaScript 
 Примеры инструкций 
 Примеры SQL 
 Примеры Python 
 Примеры W3.CSS 
 Примеры Bootstrap 
 Примеры PHP 
 Примеры Java 
 Примеры XML 
 Примеры jQuery 
 FORUM |
 О
 W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности.
 Copyright 1999-2022 Refsnes Data. Все права защищены. 
  W3Schools работает на основе W3.CSS.
 Размер шрифта по умолчанию в процентах для элемента html - HTML и CSS - Форумы SitePoint 
 thehung1724  29 октября 2014 г., 19:50 
 #1
 Я установил размер шрифта html по умолчанию:
 html{
    размер шрифта: 75%; /* 12 пикселей */
}
 
 Затем установите размер шрифта тела, как показано ниже:
 тело {
    размер шрифта: 0,75 em; /* 12 пикселей */
}
 
 Теперь я собираюсь установить 14 пикселей для тега p, чтобы он выглядел так:
 p{
    размер шрифта: 0,875 em; /* 14 пикселей */
}
 
 Но когда я проверяю браузер, он выглядит таким маленьким. Что не так с моим кодом выше? Заранее спасибо.
 ТехноМедведь  29 октября 2014 г., 20:01 
 #2
 Параметр p вычисляет 0,875 размера шрифта родительского элемента. Вы установили его равным 0,75 em, поэтому ваш p будет равен 0,75x0,875=0,656 em
 [quote="thehung1724, сообщение:1, тема:102291"] 
 Что не так с приведенным выше кодом? 
 [/quote]На мой взгляд, тот факт, что вы переопределили любые настройки по умолчанию, которые выбрали ваши посетители. У меня размер шрифта по умолчанию 16 пикселей, потому что все, что меньше этого, становится трудно читать. Если вы переопределите это, у меня немедленно возникнет неудобство необходимости увеличивать масштаб, чтобы использовать ваш сайт, а не то, что побудит меня использовать его.
 1 Нравится
 ПолOB  29 октября 2014 г. , 20:05 
 #4
 Вы устанавливаете элемент html на 75%, а затем устанавливаете значение body на 75%, поэтому тело будет составлять 75% вычисленного размера элемента html.
 Если, например, по умолчанию для элемента html было 16 пикселей (не гарантируется, поскольку пользователь может изменить это, и UA не должны устанавливать значение по умолчанию, и действительно мобильные устройства также могут отличаться), но для аргументов скажите, что значение по умолчанию составляет 16 пикселей, тогда ваши 75% от 16px сделают элемент html 12px.
 Затем вы устанавливаете тело на 57%, чтобы оно составляло 75% от его родителя, что означает, что тело имеет размер 9px.
 Затем вы устанавливаете элемент p равным 0,875% от тела, поэтому элемент p теперь равен 10,5 пикселям (10 или 11 пикселей в зависимости от того, как браузер округляет вверх или вниз — скорее всего, 11 пикселей).
 В большинстве случаев вы хотите установить базовый размер текста в соответствии с размером текста, который чаще всего используется на сайте, чтобы избежать сложных проблем.
 Для читаемого текста контента вы не хотите, чтобы он был меньше 14 пикселей, поэтому просто установите для тела значение 8,7,5%.
 тело {
высота строки: 1,4;
размер шрифта: 87,5%;
}
 
 Или просто оставьте значение по умолчанию, что обычно требуется пользователям.
 Помните, однако, что это не гарантируется, и пользователи могут использовать разные значения по умолчанию в качестве базовых, поэтому они могут видеть 20 пикселей или 10 пикселей, но это их выбор. Вам просто нужно кодировать с учетом этого. Все размеры будут относительными, поэтому это не должно иметь большого значения.
 Избегайте сброса размеров шрифта везде и избегайте установки для элементов, которые могут быть вложенными, поскольку размеры будут складываться. Вы можете совершенно безопасно установить размер шрифта для элемента p, но сделать то же самое для элемента ul, и вложенный список будет составляться.
 Чтобы избежать проблем с компаундированием в наши дни, вы можете использовать единицу измерения rem, которая всегда относится к элементу body.
 2 лайка
 30 октября 2014 г., 6:58 
 #5
 Большое спасибо @PaulOB. Пожалуйста, посмотрите, правильно ли я установил код ниже:
 html{
размер шрифта: 100%;
}
тело{
размер шрифта: 0,75 em; /* 12 пикселей */
}
п{
размер шрифта: 1.167em; /* 14 пикселей. Конвертировано с сайта pxtoem.com */
} 
 ПолOB  30 октября 2014 г., 8:09 
 #6
 Это правильно с точки зрения математики, если предположить, что по умолчанию установлено значение 16px (которое может и не быть).
 Однако, если вам нужен базовый размер 14px, то почему бы не сделать это сразу.
 корпус {
высота строки: 1,4;
размер шрифта: 87,5%;
}
 
 Элементы p теперь будут иметь размер 14 пикселей (или эквивалентный масштаб для базового размера пользователя), поскольку они не имеют размера по умолчанию (в отличие от заголовков и т.