Начертание | htmlbook.ru
Жирное начертание
Насыщенностью называют увеличение толщины линий шрифта и соответственно контраста. Обычно различают четыре вида насыщенности: светлое начертание, нормальное, полужирное и жирное. Однако с помощью HTML можно установить только нормальное и жирное начертание. Для установки текста жирного начертания применяется два тега: <b> и <strong>.
<b>Жирное начертание шрифта</b>
<strong>Сильное выделение текста</strong>
Курсивное начертание
Курсивный шрифт представляет собой не просто наклон отдельных символов, для некоторых шрифтов это полная переделка под новый стиль, имитирующий рукописный. Курсив для текста определяют два тега: <i> и <em>.
<i>Курсивное начертание шрифта</i>
<em>Выделение текста</em>
Следует отметить, что теги <b> и <strong>, также как <i> и <em> хотя и похожи по своему действию, являются не совсем эквивалентными и заменяемыми. Первый тег <b> — является тегом физической разметки и устанавливает жирное начертание текста, а тег <strong> — тегом логической разметки и выделяет помеченный текст. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов <b> и <strong>, будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.
В примере 7.5 показано использование тегов <em> и <strong> для оформления текстов.
Пример 7.5. Теги <em> и <strong>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Оформление текста</title>
</head>
<body>
<p><strong>А где же печенье и самогоноваренье?!</strong> —
<em>воскликнул Мальчиш-плохиш</em>.</p>
</body>
</html>
Результат данного примера показан на рис. 7.5.
Рис. 7.5. Жирное и курсивное начертание текста
Как сделать большой шрифт в html. Цвет шрифта HTML
Цвет шрифта на сайте можно задать при помощи HTML-кода. Для этого существует тег font . По определению, тег font служит некой «обёрткой» или «контейнером» для текста, управляя свойствами которого можно изменять оформление текста.
Тег font применяется следующим образом:
Конструктор сайтов «Нубекс»
Самый простой способ, как изменить цвет шрифта в HTML, это использовать атрибут color тега font :
Конструктор сайтов «Нубекс»
Здесь задается синий цвет для слова, обрамленного тегом font .
Атрибуты тега FONT
Тег font имеет всего три атрибута:
- color — задает цвет текста;
- size — устанавливает размер текста;
- face — задает семейство шрифтов.
Параметр color может быть определен названием цвета (например, “red”, “blue”, “green”) или шестнадцатеричным кодом (например, #fa8e47).
Атрибут size может принимать значения от 1 до 7 (по умолчанию равен 3, что соответствует 13,5 пунктам для шрифта Times New Roman). Другой вариант задания атрибута — “+1” или “-1”. Это означает, что размер будет изменен относительно базового на 1 больше или меньше, соответственно.
Рассмотрим применение этих атрибутов на нашем примере:
Меняем цвет шрифта при помощи HTMLКонструктор сайтов «Нубекс»
Мы применили тег font к одному слову, задали для него размер 6, оранжевый цвет и семейство шрифтов “Serif”.
Задание цвета текста при помощи CSS
Если вам нужно применить определенное форматирование (например, изменить цвет текста) к нескольким участкам текста, то более правильно будет воспользоваться CSS-кодом. Для этого существует атрибут color. Рассмотрим способ его применения на нашем примере: Меняем цвет шрифта при помощи CSSКонструктор сайтов «Нубекс»
Здесь мы задали синий цвет для слова «Конструктор» (размер его, по умолчанию, 100% от базового), зеленый цвет и размер 125% для слова «сайтов», оранжевый цвет и размер 150% для слова «Нубекс».
Для изменения шрифта служит тэг с атрибутом FACE. Можно указывать шрифт по названию (Arial, Tahoma, Verdana) или типу(например, monospace). Желательно перечислить несколько имен шрифта, чтобы избежать ситуации, когда окажется, что требуемый шрифт не установлен у пользователя. Рекомендую «забить» хотя бы один из общепринятых шрифтов (например Arial). Не рекомендую на одной странице применять более 2-3 различных шрифтов, иначе страница будет смотреться аляповато и непрофессионально.
Пример:
Изменение размера шрифта html-страницы
Для изменения размера шрифта используют атрибут SIZE. Чем крупнее шрифт, тем более легким для восприятия становится текст. Однако, мелкий шрифт позволяет уместить в пределах экрана больший объем информации. Используя данный атрибут с тэгом , вы можете изменить размер текста вэб-страницы целиком. Применяя атрибут SIZE совместно с тэгом , можно воздействовать на внешний вид отдельного фрагмента текста. Доступно 7 размеров шрифтов. Самый малый обозначается цифрой 1, а самый крупный — 7.
Изменять шрифт можно с помощью тэгов и . укрупняет шрифт указанного фрагмента по отношению к предыдущему тексту, а , соответственно, уменьшает.
Меняя размер отдельных букв, можно добиться интересных эффектов. Например, таким образом можно получить буквицу — укрупненную прописную букву начала абзаца.
Пример:
Выбор цвета шрифта html-страницы
Отображение участков текста Вэб-страницы шрифтами разного цвета придает ей привлекательность.
Используя атрибут TEXT в контексте тэга
, можно изменить цвет текста вэб-страницы целиком. Применение же атрибута COLOR с тэгом (обладает более высоким приоритетом) позволяет взаимодействовать на внешний вид отдельного фрагмента текста.Чтобы изменить цвет текста, надо знать наименование цвета, либо его шестнадцатеричный код. Код состоит из символа фунта # и числа, представляющего интенсивность красной, зеленой и синей составляющих цвета. По имени можно сослаться только на 16 стандартных цветов.
Наим-е цвета Код aqua ##00FFFF black ##000000 blue ##0000FF fuchsia ##FF00FF gray ##808080 green ##008000 lime ##00FF00 maroon ##800000 navy ##000080 olive ##808000 purple ##800080 red ##FF0000 silver ##C0C0C0 teal ##008080 white ##FFFFFF yellow ##FFFF00
Качественная верстка веб-сайтов имеет главную цель — сделать информацию на странице максимально читабельной и удобной для восприятия пользователем. И работа с текстом посредством 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. Это откроет новые горизонты в создании веб-страниц.
- Нельзя пренебрегать тестированием готового сайта в различных браузерах и на разных платформах. Как уже писалось выше, параметры текста могут существенно отличаться, особенно при использовании устаревших версий браузеров.
- Всегда следует использовать пробелы и табуляцию при написании кода. Это облегчает его читабельность и понимание.
Первым делом хочу немного отвлечься от темы и поговорить о своих примерах кодов, например в предыдущей главе я ни где не изобразил полного кода страницы а показывал только так:
- HTML
- CSS
- введение
- типы документов
- типы стилей
- PHP
- фотошоп
- HTML
- РНР
А сейчас вернемся к нашей главе, для выполнения всех этих функций перечисленных в заглавии служит тег-контейнер
Теперь вернемся к нашей теме.
Для того что бы изменить размер, шрифт или цвет текста отдельного участка в HTML существует тег-контейнер отдельный кусок текста
Начнем по порядку, и научимся изменять цвет текста отдельного участка, для этой цели в тег FONT нужно поместить атрибут COLOR вот так:
color=»red» > отдельный кусок текста Значения атрибута color такие-же как и для атрибутов bgcolor text тега body, т.е мы можем их задавать словами по английски(Black, Green, Silver, Lime, Gray, Olive, White, Yellow, Maroon, Navy, Red, Blue, Purple, Teal, Fuchsia, Aqua)или номерами цвета в RGB (#000000- #FFFFFF)
face=»Tahoma» > отдельный кусок текста Шрифты служат для того что-бы текст имел более неординарный вид, но есть одна проблема, шрифтов которые есть у вас(посмотреть их можно в C:WINDOWSFonts) может не оказаться у ваших посетителей, вторая проблема шрифтов что некоторые шрифты можно использовать только к кириллице(русскими буквам) или наоборот только с латиницей(английскими буквами), есть конечно и третий тип который подходит и к латинице и кириллице. В нижнем списке я покажу какие шрифты есть стандартными и есть на всех компах а также подходят к любым буквам:
- Arial
- Cosmic Sans
- Courier
- Garamond
- Helvetica
- Verdana
- Tahoma
- Times
- Times New Roman
Из этого кода хотел заметить следующее, что если у вашего посетителя не окажется шрифта Tahoma , то текст будет предоставлен шрифтом Times , а если нет и Times то текст будет Times New Roman. Ну а если и этого шрифта не будет то шрифт по умолчанию браузера.
А теперь перейдем к размерам, изменить размер текста в HTML можно при помощи двух тегов font и/или BASEFONT .
Начнем с BASEFONT , этот тег служит для изменения базового цвета, шрифта и размера текста, на пример:
….текст….
Этот тег не является контейнером, т.е. обратного тега не имеет. Цвет и шрифт текста задается как в теге FONT , а вот для изменения размера текста используется атрибут SIZE с значением от 1 до 7. Этот тег в тексте можно использовать несколько раз: size=»4″
>….текст….
size=»6″
>….текст….
size=»3″
>….текст….
По умолчанию размер текста = «3», этот размер можно не задавать. В первом примере мы весть текст увеличили на единицу, во второй линии мы его увиличили до «6», а в третей мы опять его вернули к тексту по умолчанию.
Теперь хочу вас круто огорчить, этот тег был введен в версии HTML-4.01, и соответственно поддерживается в браузере только Интернет Експлорер, остальные браузеры его просто игнорируют, Так что лучше этот тег не использовать вообще!!!
А пользоваться только тегом FONT с атрибутом SIZE он поддерживается почти всеми браузерами. Атрибут SIZE , так же принимает значения от 1 до 7, но эти размеры могут задаваться и от «-2» до «+4»
текст
текст
текст
текст
текст
текст
текст
Тег FONT как и BASEFONT может содержать несколько атрибутов:
size=»5″ color=»red» fase=»Tahoma, Times, Verdana»
>…. текст….
Форматированию текста в HTML в первую очередь следует уделить внимание, так как практически на любой странице большая часть информации представлена в текстовом виде. Кроме этого, изучив эту тему, Вы познакомитесь со значительной частью HTML тегов.
Группу тегов HTML, предназначенных для работы с текстом можно разделить на две основные подгруппы: теги физического форматирования и теги логического форматирования текста .
Теги физического форматирования физически воздействуют на текст — отвечают за выделение, размещение, оформление текста, которое необходимо для его корректного и одинакового отображения в браузерах.
Теги логического форматирования в большей степени несут смысловую нагрузку, и некоторые из них в основном предназначены для удобства работы поисковых систем.
К тегам физического форматирования относятся следующие теги:
Эти теги относятся к группе логического форматирования:
Абзац в HTML. Перенос текста
Важнейшим тегом физического форматирования текста является тег
Который предназначен для разбивки текста на параграфы.
Каждый тег
Создает новый параграф. При этом текст начинается с новой строки, и между параграфами образуется промежуток.
Атрибут align тега
Позволяет позиционировать абзац по горизонтали, размещая его слева (align= «left» ), справа (align= «right» ), располагая по центру (align= «center» ) или выравнивая по ширине (align= «justify» ) окна браузера или родительского элемента.
Текст после тега
также начинается с новой строки. Но тег
осуществляет лишь перенос строк — он не образует промежутка между ними и его можно использовать внутри тега
Тег
наоборот запрещает перенос строк. Если длина строки превысит ширину окна браузера, то появится горизонтальная полоса прокрутки. В свою очередь тег
«center» >
Текст разбит на параграфы.При просмотре в браузере новый абзац отделяется от предыдущего пустой строкой. Тег
используется для переноса строки.
Текст разбит на параграфы.
При просмотре в браузере новый абзац отделяется от предыдущего пустой строкой. Тег
используется для переноса строки.
Заголовки в HTML. Размер текста
Заголовки в HTML представлены шестью тегами
Тегом
Тегами
и
можно выделить подтемы, крупные разделы — как правило их немного на страницы. Текст в таких заголовках уже не такой крупный, как в заголовках высшего уровня.
Использование заголовков в HTML «облегчает жизнь» не только пользователям в плане удобного и быстрого ориентирования на странице, но и упрощают работу поисковым роботам, позволяя выделить главное и второстепенное, что положительно влияет на оптимизацию страниц сайта.
Теги
Имеют атрибут align , позволяющий выравнивать заголовок по горизонтали.
Использование закрывающего тега для всех заголовков HTML, является обязательным условием их применения!
Заголовок 2-го уровня
Заголовок 3-го уровня
Заголовок 4-го уровня
Заголовок 5-го уровня
Заголовок 6-го уровня — мелкий шрифт!
Заголовок 2-го уровня
Заголовок 3-го уровня
Заголовок 4-го уровня
Заголовок 5-го уровня
Заголовок 6-го уровня — мелкий шрифт!
Как видно из примера, преобразуя фрагмент текста в заголовок, мы влияем на его размер — увеличиваем или уменьшаем в зависимости от уровня заголовка.
Размер текста продолжение…
Теги и тоже позволяют изменить размер текста: они соответственно увеличивают и уменьшают текущий размера шрифта на одну единицу.
В HTML размер шрифта задается в условных единицах от 1 до 7 . По умолчанию текст имеет средний размер шрифта, относящийся к 3 условной единице.
Теги и предназначены для отображения текста в виде верхнего и нижнего индекса соответственно. При этом размер шрифта уменьшается на единицу.
И наконец рассмотрим тег . Он предназначен не только для изменения размера текста, но и для задания таких его характеристик как цвет и указания семейства шрифтов.
Атрибут size тега задает размер шрифта в условных единицах от 1 до 7 , атрибут color предназначен для задания цвета (Цвет можно задать двумя способами ), и атрибут face определяет семейство шрифтов .
Увеличение и уменьшение текущего размера шрифта на одну условную единицу.
Индекс верхний……. и Индекс нижний……. в HTML.
Изменим характеристики текущего шрифта «Arial, Helvetica, sans-serif» > при помощи тега font
Увеличение и уменьшение текущего размера шрифта на одну условную единицу.
Индекс верхний……. и Индекс нижний……. в HTML.
Изменим характеристики текущего шрифта при помощи тега font
Тег предназначен для задания тех же свойств текста, что и тег . Отличие в том, что тег может располагаться как в теле, так и в голове документа. При этом он определяет свойства текста для всего документа, за исключением текста, расположенного в теге .
Тег поддерживается только браузером Internet Explorer. Его использование не рекомендовано. Впрочем как не рекомендуется и применение тега !
Изучайте CSS и работайте со стилями!
Гарнитура шрифта
По начертанию шрифт может отличаться постановкой — прямой или курсив, и насыщенностью (плотностью ) — светлый и жирный.
По умолчанию в браузере Вы видите светлый текст прямой постановки. Тег позволяет отобразить текст курсивом, а тег сделать его жирным.
Изменим начертание шрифта: его постановку и насыщенность!
Изменим начертание шрифта: его постановку и насыщенность!
Моноширинный шрифт
Многие среды разработки и редакторы исходного текста программ по умолчанию настроены на моноширинные шрифты. Это сделано для удобства работы программистов: улучшается удобочитаемость кода.
Шрифты этого семейства отличаются тем, что все буквы имеют одинаковую ширину .
В HTML несколько тегов отображают текст моноширинным шрифтом.
Один из них — тег физического форматирования текста
Кроме этого, отображает текст в браузере со всеми пробелами между словами (по умолчанию браузеры воспринимают несколько пробелов, следующих друг за другом, как один ).Остальные теги HTML, отображающие текст моноширинным шрифтом, относятся к тегам логического форматирования текста. Другое их назначение в том, что они предоставляют разного рода информацию, для поисковых систем и других программ, о заключенном в них тексте:
Тег
- отображает текст, который является программным кодом;
Тег - обозначает текст, который набирают на клавиатуре или для названия клавиш;
Тег - предназначен для отображения текста, который является результатом, выдаваемым программой или скриптом.
Програмный код:
FOR i=1 TO 20
Названия клавиш: Alt+F1
Результат скрипта: Hello, PHP!
Все пробелы между словами:
Один Два Три - Попробуйте сами!Програмный код: FOR i=1 TO 20
Названия клавиш: Alt+F1
Результат скрипта: Hello, PHP!
Все пробелы между словами:
Один Два Три - Попробуйте сами!
Цитаты в HTML. Подчеркивание и перечеркивание текста
Тег предназначен для подчеркивания текста, а тег для его перечеркивания. Это теги физического форматирования текста, и, кроме визуального оформления, никакой смысловой нагрузки они не несут.
В каких случаях Вы будете использовать эти теги - решать Вам!
Подчеркнутый и перечеркнутый текст - Все!
Подчеркнутый и перечеркнутый текст - Все!
Оформление цитат
Возможно, в процессе создания сайта, Вам понадобится вставить цитату на страницу.
Цитата - это дословная выдержка текста из какого-либо произведения. Желательно, чтобы цитируемый текст идентифицировался читающим лицом как вставленный. Для этого цитату необходимо выделить/оформить соответствующим образом.
В HTLM для этой цели существует специальный тег -
. Текст, заключенный в этот тег, оформляется следующим образом: сверху и снизу от основного текста образуются промежутки, а слева и справа отступы (примерно по 40 пикселей ).Как сказал Г. Ламене:
Наука служит лишь для того, чтобы дать нам понятие о размерах нашего невежества.Как сказал Г. Ламене:
Наука служит лишь для того, чтобы дать нам понятие о размерах нашего невежества.Несколько логических тегов
Мы не коснулись еще 3-х тегов, относящихся к группе логического форматирования: это теги , и
.Теги и похожи. Первый из них предназначен для обозначения аббревиатуры, второй - акронима.
Акроним - это таже аббревиатура, только произносится он как единое слово, а не побуквенно.
Оба сокращения при просмотре в браузере подчеркнуты пунктирной линией, и к обоим желательно добавлять всплывающую подсказку - расшифровку сокращения (при помощи атрибута title ).
Тег
применяется для заключения текста в кавычки. Этот тег можно использовать при оформлении цитат или при употреблении слов и выражений, которые имеют переносный смысл.HTML - это аббревиатура - произносится побуквенно.
"Научно-исследовательский институт" > НИИ - это акроним. Акроним применяется как самостоятельное слово.
Близнецы похожи
как две капли воды.HTML - это аббревиатура - произносится побуквенно.
НИИ - это акроним. Акроним применяется как самостоятельное слово.
Близнецы похожи как две капли воды.
Изменение шрифта и цвета текста по умолчанию для сообщений электронной почты
В Outlook по умолчанию используется шрифт Calibri черного цвета размером 11 пунктов. Этот шрифт используется при создании нового сообщения электронной почты. Вы можете изменить используемый по умолчанию шрифт, а также его цвет, размер и начертание (например, полужирный или курсив).
Вид, размер, цвет и начертание шрифтов в Outlook можно изменять для новых, ответных и пересылаемых сообщений по отдельности. Если вы хотите изменить шрифт в списке сообщений, см. статью Создание, изменение и настройка представлений.
Изменение вида, цвета, начертания и размера шрифта для сообщений
-
На вкладке Файл выберите Параметры > Почта.
Примечание: Если у вас есть Outlook 2007, в меню Сервис выберите Параметры > Формат.
-
В разделе Создание сообщений нажмите кнопку Шрифты и бланки.
-
На вкладке Личный бланк в разделе Новые сообщения или Ответные и пересылаемые сообщения нажмите кнопку Шрифт.
-
На вкладке Шрифт выберите нужный шрифт, а также его начертание, размер и цвет. Изменения отображаются в области предварительного просмотра по мере их внесения.
-
Три раза нажмите кнопку ОК, чтобы вернуться в Outlook.
Новые параметры вступят в силу немедленно.
Примечания:
-
Шрифты для новых, ответных и пересылаемых сообщений можно настраивать по отдельности.
-
Если выбранный вами шрифт не установлен на компьютере получателя, то почтовая программа получателя заменит его доступным шрифтом.
Восстановление первоначальных параметров шрифта по умолчанию
Если позднее вы не захотите оставлять настроенные параметры шрифта и решите вернуться к значениям по умолчанию, выполните описанные выше действия, но выберите при этом указанные ниже значения.
-
Шрифт: +Основной текст
-
Начертание: обычный
-
Размер: 11
-
Цвет шрифта: Авто
Изменение размера шрифта для сообщений для чтения
Размер сообщений в области чтения можно изменить с помощью функции масштабирования.
Изменение масштаба для одного сообщения
-
Чтобы настроить масштаб, используйте ползунок в правой нижней части области чтения. При этом размер текста в области чтения будет увеличиваться или уменьшаться.
Изменение масштаба для всех полученных сообщений
-
Теперь вы можете изменить масштаб для всех полученных сообщений. Щелкните процентное соотношение справа от ползуна «Масштаб», чтобы открыть окно «Масштаб».
-
Выберите один из вариантов по умолчанию или введите определенное процентное значение.
-
Чтобы применить этот масштаб для всех сообщений, выберите параметр «Запомнить настройки» и нажмите кнопку «ОК».
См. также
Создание, изменение и настройка представлений
CSS свойство font-size
Пример
Установите размер шрифта для разных элементов:
div.a {font-size: 15 пикселей;
}
див.b {
размер шрифта: большой;
}
div.c {
font-size: 150%;
}
Определение и использование
Свойство font-size
устанавливает размер шрифта.
Поддержка браузера
Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.
Объект | |||||
---|---|---|---|---|---|
размер шрифта | 1,0 | 5,5 | 1,0 | 1,0 | 7,0 |
Синтаксис CSS
размер шрифта: средний | xx-маленький | x-маленький | маленький | большой | x-большой | xx-большой | меньший | больший | длина | начальная | наследование;
Стоимость объекта
Значение | Описание | Играй |
---|---|---|
средний | Устанавливает средний размер шрифта.Это значение по умолчанию | Играй » |
xx малый | Устанавливает размер шрифта на xx-small size | Играй » |
x-маленький | Устанавливает очень маленький размер шрифта | Играй » |
малый | Устанавливает малый размер шрифта. | Играй » |
большой | Устанавливает большой размер шрифта | Играй » |
x большой | Устанавливает очень большой размер шрифта | Играй » |
xx большой | Устанавливает размер шрифта в xx-большой размер | Играй » |
меньше | Устанавливает размер шрифта меньшего размера, чем родительский элемент | Играй » |
больше | Устанавливает размер шрифта больше, чем у родительского элемента. | Играй » |
длина | Устанавливает фиксированный размер шрифта в пикселях, см и т. Д.Подробнее о единицах длины | Играй » |
% | Устанавливает размер шрифта в процентах от размера шрифта родительского элемента. | Играй » |
начальный | Устанавливает для этого свойства значение по умолчанию. Читать о начальные | Играй » |
унаследовать | Наследует это свойство от своего родительского элемента. Читать про наследство |
Связанные страницы
УчебникCSS: шрифты CSS
Ссылка CSS: свойство шрифта
СсылкаHTML DOM: fontSize свойство
Размер шрифта имеет значение
Размер шрифта имеет значение
Веб-обзор
Август 1999 г.
В поисках идеального дизайна страницы с помощью CSS большинство авторов пытаются влиять на шрифт страницы.Первым делом обычно устанавливается тип шрифта, используя такие свойства, как font-family
(для получения дополнительной информации см. Статью «Ощущение стиля» «Все в семействе шрифтов»). Следующее, что обычно пытаются сделать авторы, — это повлиять на размер шрифтов — и здесь действительно начинаются проблемы.
CSS предлагает множество методов для изменения размера текста, все они включают свойство font-size
. Однако, как выясняется, каждая из них таит в себе какую-то опасность или недостаток.В этом месяце мы рассмотрим два метода изменения размера шрифта и возможные подводные камни. Обладая этими знаниями, вы сможете решить, что лучше всего подходит для вас в той или иной ситуации.
Абсолютные размеры
Самый простой способ использования предполагает использование ключевых слов, каждое из которых соответствует определенному абсолютному размеру. Эти семь ключевых слов:
средний xx-маленький xx-большой x-маленький x-большой маленький большой
…и значение по умолчанию — среднее
. Запомните это значение по умолчанию, потому что оно станет очень важным для дальнейшего обсуждения.
Использовать эти ключевые слова довольно просто. Допустим, вы хотите, чтобы все элементы h2
были очень большими. Это делается следующим образом:
h2 {font-size: x-large;}
С другой стороны, вы можете сделать текст в нижнем колонтитуле маленьким. Вот один из способов сделать это:
DIV.footer {font-size: small;}
Взаимосвязь между этими размерами точно не определена в CSS, но предлагается коэффициент масштабирования около 1.2, что означает, что если средний
эквивалентен 12pt
, тогда small
будет примерно 10pt
, x-small
будет примерно 8pt
, large
будет примерно 14pt и т. Д. . Текущие браузеры, похоже, использовали этот коэффициент масштабирования, поэтому нет большой разницы в размере шрифта в этой учетной записи.
Особенность этих размеров в том, что они никогда не изменятся, независимо от того, что делает пользователь (за исключением, конечно, отключения таблиц стилей).Как только ключевые слова абсолютного размера используются в элементе, размер шрифта этого элемента фиксируется на месте. Если пользователь пытается изменить размер текста через свой браузер, любой элемент с абсолютным размером шрифта не изменится, хотя любой другой элемент изменится. Это не позволяет пользователям увеличивать текст вашей страницы, если им нужно видеть его более четко, или меньше, если они считают его слишком большим.
Наверное, все это кажется очень простым. В этом нет ничего сложного, верно?
Непоследовательно, но не ошибочно
К сожалению, это не так.Проблема с ключевыми словами абсолютного размера заключается в том, что они не совпадают в Explorer и Navigator, и они могут вообще не совпадать в каких-либо браузерах.
Причина этого настолько же проста, насколько и неприятна. В спецификации CSS сказано, что каждому из этих размеров назначается определенный размер шрифта, и эти значения никогда не меняются. Следовательно, если браузер присваивает средний
равным 12 точкам, то любой шрифт, размер которого установлен на medium
, будет иметь размер 12 пунктов.Проблема в том, что в спецификации не указано, какому размеру должно соответствовать каждое ключевое слово. Браузер A может установить medium
таким же, как 11pt
, тогда как браузер B устанавливает его на 13pt
, а браузер C выбирает 12pt
. Без явного набора значений браузерам необязательно использовать одни и те же балльные значения для этих ключевых слов.
Возможно, нам повезло, поскольку производители браузеров могли выбрать для этих ключевых слов одинаковые значения. Конечно, не были, но причина этого может вас удивить.Он включает в себя устаревшее поведение в HTML и количество ключевых слов абсолютного размера.
Если вы помните, существует семь ключевых слов абсолютного размера. В HTML 3.2 было семь размеров FONT и
(например, FONT size = "4"
). Поэтому кажется логичным, что семь ключевых слов должны соответствовать каждому из семи размеров FONT
. К сожалению, это означает следующее:
1 | 2 | 3 | 4 | 5 | 6 | 7 |
---|---|---|---|---|---|---|
xx малый | x маленький | малый | средний | большой | x большой | xx большой |
Обратите внимание, где средний
попадает: на номер 4. Однако в HTML размер шрифта по умолчанию
был 3 — поэтому, следуя этой таблице, «нормальный» текст (имеющий размер 3) будет соответствовать small
, а не средний
. Это то, что делает Internet Explorer.
Navigator 4.x, с другой стороны, предполагает, что средний
должен быть таким же, как «нормальный» (размер 3) текст. Это тоже вполне разумно, поскольку естественно было бы предположить, что значение по умолчанию (, средний,
) должно соответствовать «нормальному» тексту.
Из-за этого несоответствия установка размера шрифта с использованием любого ключевого слова абсолютного размера гарантирует несогласованный внешний вид между проводником и навигатором. Возьмем этот пример:
Это текст размером 12 пунктов. | Это средний текст. | Это текст размером 14 пунктов. |
Это текст размером 10 пунктов. | Это небольшой текст. | Это текст размером 12 пунктов. |
В Navigator 4.x первые две ячейки в каждой строке должны содержать текст одинакового размера; в проводнике вторая и третья ячейки должны содержать текст одинакового размера. Кикер в том, что ни то, ни другое не неверно. На этот раз несоответствие между браузерами нельзя винить ни в одном, ни в другом, потому что оба соответствуют спецификации. Они просто уступчивы по-разному.
Относительные размеры
Есть еще два ключевых слова, оба из которых не противоречат друг другу.Это более крупный
и меньший
, и их эффект заключается в увеличении или уменьшении размера шрифта по отношению к родительскому элементу с использованием согласованного коэффициента масштабирования (в спецификации рекомендуется 1,2). Таким образом, учитывая следующую разметку:
BODY {font-size: 12pt;} БОЛЬШОЙ {размер шрифта: больше;} МАЛЕНЬКИЙ {размер шрифта: меньше;}
… любой текст в элементе BIG
будет иметь размер около 14 пунктов, тогда как любой текст SMALL
будет иметь размер около 10 пунктов.Опять же, точные размеры зависят от коэффициента масштабирования, используемого браузером, но 1.2, похоже, используется довольно последовательно.
Опасность здесь в том, что изменения в размере накапливаются. Возьмите эту разметку:
UL {размер шрифта: меньше;}
Этот стиль приведет к тому, что размер шрифта каждого элемента UL будет меньше, чем у его родительского элемента. Обычно это нормально, но что происходит, когда у вас есть вложенные списки? Вот пример:
- Это элемент списка…
- … а этот содержит неупорядоченный список:
- Это элемент списка …
- … а этот содержит неупорядоченный список:
- Это элемент списка …
- … а этот содержит неупорядоченный список:
- Это элемент списка …
- … а этот содержит неупорядоченный список:
- плюс еще один элемент списка.
- плюс еще один элемент списка.
- плюс еще один элемент списка.
Если ваш браузер поддерживает CSS, то вы должны увидеть, что каждый список все меньше и меньше, становясь все менее читаемым. Это совершенно правильное поведение. Тот факт, что размер шрифта становится меньше с каждым списком, — это именно то, что описывает правило и что должен делать браузер.
Основным преимуществом использования ключевых слов относительного размера является то, что они заставляют все работать в соответствии с предпочтениями размера по умолчанию пользователя. Они также позволяют пользователю влиять на размер всех шрифтов.Например, если у пользователя нарушено зрение и он не может прочесть часть вашего текста, он может увеличить размер шрифта по умолчанию и вместе с ним увеличить размер всего остального, сохраняя при этом те же относительные размеры: МАЛЕНЬКИЙ
текст будет по-прежнему меньше обычного текста и т. д.
Как мы видели, недостатком является то, что если вы не будете осторожны, ваш текст может быстро стать слишком маленьким для чтения или слишком большим, чтобы поместиться на обычном мониторе. Подумайте на мгновение о том, что произойдет со страницей, которая использует таблицы для размещения текста и имеет следующее правило:
TD {размер шрифта: меньше;}
Если есть какая-либо вложенность таблиц, текст внутри этих таблиц очень быстро станет неразборчивым.Учитывая преобладание страниц с макетами таблиц, такие правила следует использовать с особой осторожностью, и вам нужно будет провести много тестов, прежде чем опубликовать свой дизайн.
Оптимизация размеров через структуру
Один из возможных обходных путей — использовать контекстные селекторы в ваших интересах:
ТАБЛИЦА TD ТАБЛИЦА TD {размер шрифта: меньше;}
Это не повлияет на размер текста в «первой» таблице, но сделает меньше
любого текста во вложенной таблице.Однако это абсолютно зависит от очень конкретной структуры документа и может стать серьезной проблемой, если структура вашей страницы изменится — скажем, если другая таблица будет обернута вокруг всей страницы.
Гораздо лучший обходной путь — назначить класс ячейкам таблицы, которые содержат текст, который должен быть меньше, примерно так:
TD.aside {размер шрифта: меньше;}Текст этой ячейки должен быть меньше, чем текст его родительского элемента.
Это гораздо лучший способ справиться с такими вещами, и его преимущество заключается в том, что структура вашего документа становится намного прочнее, так что вы можете применять другие стили к такому тексту, если хотите.
Заключение
Как мы видели, при всей их кажущейся простоте использование ключевых слов может быть довольно сложным. Вы должны всегда помнить, как ваши стили будут взаимодействовать друг с другом и какое влияние это окажет на ваших пользователей. Ключевые слова абсолютного размера просты в использовании, но вносят несоответствия и ограничивают возможность пользователя изменять размер текста. Ключевые слова относительного размера обычно лучше, но если вы не будете осторожны, они сделают вашу страницу нечитаемой.
В следующем месяце мы рассмотрим еще два способа установки размера вашего текста — меры длины (например, точки) и проценты — и то, насколько они во многом похожи на ключевые слова font-size
. А пока оставайтесь стильными!
CSS Font-Size: Учебное пособие по изменению размера текста в CSS
Свойство CSS font-size устанавливает размер шрифта любого текстового элемента на вашей странице или веб-сайте. Свойство font-size можно применить к любому классу, идентификатору или элементу, который включает текстовое содержимое.Свойство принимает значения в px, em, rem, vw, vh и с использованием ключевых слов.
Найди свой учебный лагерь
- Карьера Карма подойдет вам с лучшими техническими учебными курсами
- Получите эксклюзивные стипендии и подготовительные курсы
Найди свой учебный лагерь
- Карьера Карма подойдет вам с лучшими техническими учебными курсами
- Получите эксклюзивные стипендии и подготовительные курсы
Большинство разработчиков используют комбинацию шрифтов разных размеров для стилизации веб-страницы.Например, веб-разработчик может использовать крупный шрифт для заголовков и более мелкий шрифт для основного текста и прочего. Многие спрашивают: как изменить размер шрифта в CSS или HTML?
Свойство CSS font-size
позволяет разработчикам устанавливать размер шрифта в абзаце или строке текста на веб-странице.
В этом руководстве со ссылкой на примеры обсуждается, как использовать свойство font-size . Изучая это руководство, вы сможете стать экспертом в изменении размеров текста.
Найди свой учебный лагерь
- Карьера Карма подойдет вам с лучшими техническими учебными курсами
- Получите эксклюзивные стипендии и подготовительные курсы
CSS
размер шрифта
Соответствующий стиль шрифта - важная часть веб-дизайна.Не стилизованный текст вызывает затруднения при чтении у посетителей, что почти наверняка приводит к неприятным впечатлениям от просмотра веб-сайта.
Существует множество стилей CSS для шрифтов, которые можно использовать для настройки внешнего вида текста, например font-weight, font-family, text-decoration и color. Еще одно важное свойство - font-size, которое контролирует размер шрифта в блоке текста.
Синтаксис свойства размера шрифта CSS :
sizeValue
- это размер шрифта, который вы хотите использовать в блоке текста.Есть несколько способов указать размер шрифта, используемый для блока текста. В этой статье мы собираемся обсудить следующие методы:
Карьера Карма вошла в мою жизнь, когда я больше всего в ней нуждалась, и быстро помогла мне пройти курс обучения. Через два месяца после выпуска я нашла работу своей мечты, которая соответствовала моим ценностям и целям в жизни!
Venus, инженер-программист Rockbot
Найдите свой матч на учебном лагере- пикселей
- em
- root em
- единиц просмотра
- ключевых слов
Давайте рассмотрим пример того, как использовать каждый подход к размеру шрифта на веб-странице.
Установить размер шрифта в пикселях
Один из наиболее распространенных способов установить размер шрифта - использовать пиксели.
пикселей - хорошая единица измерения, потому что они позволяют быть точными. На пиксельный блок практически не влияют операционные системы или веб-браузеры. Пиксель на одном экране - это пиксель на другом. Указанное вами значение пикселя будет примерно одинаково отображаться в разных браузерах.
Однако использование пикселей для установки размера шрифта в блоке текста имеет одно ограничение: доступность.Размеры шрифта, определенные с помощью пикселей, недоступны, поскольку некоторые браузеры не позволяют пользователям настраивать размер шрифта. Например, слабовидящим пользователям может быть сложно использовать сайт, на котором для определения размера шрифта используются пиксели.
Допустим, мы создаем веб-сайт с размером шрифта 28px,
для всех элементов
и 12px
для всех элементов
. Мы могли бы использовать следующий код для выполнения этой задачи:
h2 {размер шрифта: 28 пикселей; } p (font-size: 12px;}
В нашем коде мы использовали селектор CSS, установив размер шрифта для всех элементов
на 28px
и для всех элементов
на 12px
.В следующем фрагменте показано, как эти элементы отображаются с нашими новыми размерами шрифта:
<стиль> h2 {размер шрифта: 28 пикселей; } п {размер шрифта: 12 пикселей; }Это заголовок.
Это абзац текста.
Нажмите кнопку в правом верхнем углу окна выше, чтобы запустить код.
Установить размер шрифта с помощью ems
Другой распространенный способ установки размера шрифта в CSS - использовать размеры em.Единица измерения em относится к размеру шрифта родительского элемента. Если вы установите размер шрифта 2em
, размер шрифта будет вдвое больше, чем у родительского элемента.
Пример изменения размера шрифта CSS с помощью ems
Например, предположим, что у вас есть абзац текста, сохраненный в поле. Размер шрифта поля 20px
. Если вы указали размер шрифта абзаца текста 1em
, размер шрифта абзаца будет 20px
.Это то же самое, что и размер шрифта родительского элемента.
Если вы не установили размер шрифта для родительского элемента, браузер будет использовать значение по умолчанию, указанное для этого браузера. Обычно это 16px
. В результате, если вы не указали размер шрифта, 1em
по умолчанию 16px
, 2em
по умолчанию 32px
.
Предположим, размер шрифта нашей веб-страницы составляет 16 пикселей
. Мы хотим, чтобы все абзацы текста отображались с использованием этого размера шрифта, а это значит, что мы должны использовать значение 1em
.Кроме того, мы хотим, чтобы все наши заголовки отображались с размером шрифта 24px
, что равно 1.5em
.
Для выполнения этой задачи можно использовать следующий код:
p {font-size: 1em; } h2 {размер шрифта: 1.5em; }
В нашем коде размер всех абзацев будет 16px
(по умолчанию 1em
= 16px
), а все элементы
будут иметь размер 24px
( 1.5em
= 24px
) .
Вот как наш текст будет отображаться на веб-странице:
<стиль> п {размер шрифта: 1em; } h2 {размер шрифта: 1.5em; }Это заголовок.
Это абзац текста.
В приведенном выше примере вы можете увидеть новые стили для наших элементов
и
.
Обратите внимание, что если бы наш
появился в поле с другим размером шрифта, размер нашего
изменился.Это потому, что значения em наследуют размер шрифта своих родителей.
Установить размер шрифта с помощью Root em
Сокращение от root em, rem
- это новая единица измерения, введенная в CSS3, которая может использоваться для установки размера шрифта. Значения, использующие rem
, относятся к корневому элементу
, а не к родительскому элементу.
rem
значения полезны, потому что они позволяют указать значение относительно всего документа. Таким образом, размер вашего текста не изменится, если родительский элемент имеет другое значение em.
Предположим, у нас есть веб-страница с размером шрифта по умолчанию 16 пикселей
. Как и в нашем предыдущем примере, мы хотим, чтобы все
отображались в 24px
, а все абзацы отображались в 16px
. Мы можем установить эти размеры шрифта, используя следующий код:
<стиль> p {font-size: 1rem; } h2 {размер шрифта: 1,5 бэр; }Это заголовок.
Это абзац текста.
Наш код почти такой же, как в нашем предыдущем примере.Единственное отличие состоит в том, что мы используем единицы измерения бэр
вместо em
. В этом примере наши размеры шрифта по-прежнему будут 24px
и 16px
для заголовков и абзацев верхнего уровня соответственно. Это потому, что размер шрифта по умолчанию на нашей веб-странице составляет 16 пикселей
.
Установить размер шрифта с помощью ключевых слов
Есть два типа ключевых слов, которые можно использовать для установки размера шрифта в CSS.
Абсолютные ключевые слова используются для установки размера шрифта, который остается неизменным независимо от изменений на веб-странице.Ключевые слова, которые вы можете использовать для установки абсолютного размера шрифта, следующие:
-
xx-small
(9px) -
x-small
(10px) -
small
(13px) -
средний
(16px) -
большой
(18px) -
x-large
(24px) -
xx-large
(32px)
Значения, указанные в скобках, основаны на браузере, размер шрифта которого по умолчанию составляет 16px
.
Относительные ключевые слова, с другой стороны, устанавливают размер шрифта, который будет меняться в зависимости от размера шрифта в другом месте веб-страницы.Вы можете использовать следующие относительные ключевые слова: меньше и больше. Эти ключевые слова полезны, потому что они позволяют вам изменять размер ваших шрифтов по мере изменения других размеров шрифтов на странице.
Предположим, мы хотим установить размер всех элементов на странице на
24px
(x-large) и всех
элементов на 18px
(large). Мы могли бы сделать это с помощью этого кода:
<стиль> h3 {размер шрифта: x-большой; } h4 {размер шрифта: большой; }Это заголовок.
Это текст абзаца.
Это заголовок нижнего уровня.
Это еще текст абзаца.
Нажмите кнопку
в редакторе кода выше, чтобы увидеть результат нашего кода HTML / CSS. Размеры шрифта для наших тегов и
составляют 24px
и 18px
соответственно. Однако мы не указывали эти размеры в пикселях.Вместо этого мы использовали ключевые слова размера шрифта по умолчанию, предлагаемые браузером.
Установить размер шрифта с помощью единиц просмотра
единиц области просмотра рассчитывается как процент от размера области просмотра браузера. CSS поддерживает две единицы области просмотра: высота просмотра ( vh
) и ширина просмотра ( vw
).
Так как единицы окна просмотра - это процент от размера окна просмотра, например, 1vh
равен 1% от высоты окна просмотра. Итак, если у вас есть область просмотра шириной 1000 пикселей, 1vh
равно 10px.
Использование единиц просмотра полезно, потому что размер ваших шрифтов будет меняться при изменении размера окна браузера. Это, в свою очередь, позволяет обеспечить более доступный пользовательский интерфейс, адаптированный к разным размерам браузера и устройств.
Предположим, мы хотим создать сайт, заголовки которого составляют 4% ширины области просмотра, а абзацы - 1% ширины области просмотра. Мы могли бы сделать это с помощью этого кода:
<стиль> п {размер шрифта: 1vw; } h2 {размер шрифта: 4vw; }Это заголовок.
Это абзац текста.
Нажмите кнопку
в редакторе кода выше, чтобы увидеть результат нашего кода HTML / CSS.Если вы измените размер браузера, размер этих заголовков изменится.
Заключение
Свойство font-size используется в CSS (и, следовательно, HTML) для изменения размера шрифтов. Он принимает несколько единиц измерения, в которых могут отображаться размеры шрифта, включая пиксели, em, rem, ключевые слова и единицы области просмотра.Его можно применять к классам и идентификаторам CSS, а также к самим элементам.
В этом руководстве были рассмотрены основы размера шрифта CSS. Теперь вы готовы начать использовать атрибут font-size как эксперт.
Код размера шрифта HTML
В HTML размер шрифта задается с помощью CSS (каскадных таблиц стилей). Размер шрифта указывается с помощью свойства font-size.
Фактическое значение свойства font-size можно указать по-разному. Вы можете указать размер шрифта любым из следующих способов:
- Абсолютный размер
- Относительный размер
- Фиксированный размер
- Процент
Вариант 1: Абсолютный размер
Абсолютный размер - это запись в таблице размеров шрифта, которая вычисляется и сохраняется браузером (или другим пользовательским агентом).Из-за этого текст всегда будет отображаться с одинаковым размером независимо от окружающих его элементов. Это связано с тем, что размеры предварительно рассчитываются браузером / пользовательским агентом.
Вот пример установки размера шрифта с использованием абсолютных размеров:
Абсолютный размер - xx-small
Абсолютный размер - x-small
Абсолютный размер - маленький
Абсолютный размер - средний
Абсолютный размер - большой
Абсолютный размер - x-большой
Абсолютный размер - xx-большой
Вариант 2: Относительный размер
Относительный размер позволяет установить размер шрифта относительно родительского элемента.Это означает, что разный текст с одним и тем же (относительным) значением может фактически отображаться в разных размерах - даже на одной странице. Все зависит от родительского элемента текста. Возможны два значения: «меньше» и «больше».
Размер шрифта указан с использованием относительных значений - меньше
Размер шрифта указан с использованием относительных значений - больше
Вариант 3: значение длины
Значение длины позволяет указать абсолютный размер шрифта независимо от окружающих элементов.Есть восемь возможных значений.
относительные значения:
- em (размер шрифта соответствующего шрифта)
- пр. (Высота по оси x соответствующего шрифта)
- пикселей (пикселей относительно устройства просмотра)
Абсолютные значения:
- in (дюймы - 1 дюйм равен 2,54 сантиметра)
- см (сантиметры)
- мм (миллиметры)
- pt (точки - точки, используемые CSS2, равны 1/72 дюйма)
- шт. (Пик - 1 пик равен 12 баллам)
Примеры относительных значений
Размер шрифта указан в 1.2em
Размер шрифта указан как 1,4em
Размер шрифта указан как 1,8 мкм
<час />Размер шрифта указан 2ex
Размер шрифта указан в 3ex
Размер шрифта указан в 4ex
<час />Размер шрифта указан как 12 пикселей
Размер шрифта указан как 14 пикселей
Размер шрифта указан как 18 пикселей
Примеры абсолютных значений
Размер шрифта указан равным 0.12 дюймов
Размер шрифта указан как 0,18 дюйма
Размер шрифта указан как 0,25 дюйма
<час />Размер шрифта указан как 0,35 см
Размер шрифта указан как 0,45 см
Размер шрифта указан как 0,6 см
<час />Размер шрифта указан как 3,5 мм
Размер шрифта указан как 4,5 мм
Размер шрифта указан как 6 мм
<час />Размер шрифта указан как 10pt
Размер шрифта указан как 12 пунктов
Размер шрифта указан как 16pt
<час />Размер шрифта указан равным 0.8шт
Размер шрифта указан как 1 шт.
Размер шрифта указан как 1,2 пикселя
Вариант 4: значения в процентах
Процентные значения определяют абсолютный размер шрифта относительно размера шрифта родительского элемента.
Меньший размер шрифта указан с использованием процентных значений - 90%
Более крупный размер шрифта указан с использованием процентных значений - 150%
Другие свойства шрифта
Вот другие свойства шрифта CSS, которые вы можете использовать в своем тексте:
Размер адаптивного шрифта в CSS
В собственно оригинальном Sass (не scss) вы можете использовать приведенные ниже миксины для автоматической установки размера шрифта абзаца и всех заголовков
.
Мне нравится, потому что он намного компактнее. И быстрее печатать. В остальном он обеспечивает ту же функциональность. В любом случае, если вы все еще хотите придерживаться нового синтаксиса - scss, не стесняйтесь конвертировать мой контент Sass в scss здесь: [ПРЕОБРАЗОВАТЬ SASS В SCSS ЗДЕСЬ]
Ниже я приведу четыре примеси Sass. Вам придется настроить их параметры в соответствии с вашими потребностями.
= font-h2p-style-generator-manual () // Вам не нужно его использовать. Это только стили, которые делают его красивым.= media-query-base-font-size-change-generator-manual () // Этот миксин устанавливает базовый размер тела, который будет использоваться тегами h2-h6 для пересчета их размера в медиа-запросе.
= h2p-font-size-generator-auto ($ h2-fs: 3em, $ h2-step-down: 0,3, $ body-min-font-size: 1,2em, $ p-same-as-hx: 6) // Здесь вы установите размер h2 и размер переходов между тегами h
= config-and-run-font-generator () // Он вызывает только другие
После того, как вы закончите играть с настройками, просто вызовите один миксин - это: + config-and-run-font-generator () .См. Код ниже и комментарии для получения дополнительной информации.
Я думаю, вы могли бы сделать это автоматически для медиа-запроса, как это делается для тегов заголовков, но мы все используем разные медиа-запросы, поэтому это не подходит для всех. Я использую подход к дизайну, ориентированный на мобильные устройства, поэтому я бы поступил именно так. Не стесняйтесь копировать и использовать этот код.
КОПИРУЙТЕ ЭТИ МИКСИНЫ В СВОЙ ФАЙЛ:
= font-h2p-style-generator-manual ()
тело
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif // шрифты Google
размер шрифта: 100%
высота строки: 1.3em
% заголовков
высота строки: 1em
font-weight: 700
п
высота строки: 1.3em
font-weight: 300
@ для $ i от 1 до 6
h # {$ i}
@extend% заголовки
= media-query-base-font-size-change-generator-manual ()
тело
размер шрифта: 1.2em
@media экран и (минимальная ширина: 680 пикселей)
тело
размер шрифта: 1.4em
@media screen и (min-width: 1224px)
тело
размер шрифта: 1.6em
@media screen и (min-width: 1400px)
тело
размер шрифта: 1.8em
= h2p-font-size-generator-auto ($ h2-fs: 3em, $ h2-step-down: 0.3, $ body-min-font-size: 1.2em, $ p-same-as-hx: 6)
$ h2-fs: $ h2-fs // Установите этот размер для первого элемента заголовка
$ h2-step-down: $ h2-step-down // Уменьшать каждый раз на 0,3
$ p-same-as-hx: $ p-same-as-hx // Установить p font-sieze так же, как h (6)
$ h2-fs: $ h2-fs + $ h2-step-down // Коррекция зацикливания
@ для $ i от 1 до 6
h # {$ i}
размер шрифта: $ h2-fs - ($ h2-step-down * $ i)
@if $ i == $ p-same-as-hx
п
размер шрифта: $ h2-fs - ($ h2-step-down * $ i)
// ЗАПУСКАТЬ ТОЛЬКО ЭТОТ МИКСИН. ЭТО ЗАПУСКАЕТ ОТДЫХ
= генератор-конфигурация-и-запустить-шрифтов ()
+ font-h2p-style-generator-manual () // Просто заполнитель для нашего стиля шрифта
+ media-query-base-font-size-change-generator-manual () // Просто заполнитель для размера шрифта нашего медиа-запроса
+ h2p-font-size-generator-auto ($ h2-fs: 2em, $ h2-step-down: 0.2, $ p-same-as-hx: 5) // Задайте здесь все параметры
КОНФИГУРИРУЙТЕ ВСЕ МИКСИНЫ ПО ВАШИМ ПОТРЕБНОСТЯМ - ИГРАЙТЕ С ЭТОМ! 🙂 И ЗАТЕМ НАЗЫВАЙТЕ ЭТО НАД СВОЙ ФАКТИЧЕСКИЙ КОД SASS С:
+ генератор конфигураций и запуска шрифтов ()
Это сгенерирует этот вывод. Вы можете настроить параметры для получения различных наборов результатов. Однако, поскольку все мы используем разные медиа-запросы, некоторые миксины вам придется редактировать вручную (стиль и медиа).
СОЗДАННЫЙ CSS:
кузов {
семейство шрифтов: «Source Sans Pro», «Helvetica Neue», Helvetica, Arial, sans-serif;
размер шрифта: 100%;
высота строки: 1.3em;
перенос слов: слово-разрыв; }
h2, h3, h4, h5, h5, h6 {
высота строки: 1em;
font-weight: 700; }
п {
высота строки: 1.3em;
font-weight: 300; }
тело {
размер шрифта: 1.2em; }
@media screen и (min-width: 680px) {
тело {
размер шрифта: 1.4em; }}
@media screen и (min-width: 1224px) {
тело {
размер шрифта: 1.6em; }}
@media screen и (min-width: 1400px) {
тело {
размер шрифта: 1.8em; }}
h2 {
размер шрифта: 2em; }
h3 {
размер шрифта: 1.8em; }
h4 {
размер шрифта: 1.6em; }
h5 {
размер шрифта: 1.4em; }
h5 {
размер шрифта: 1.2em; }
п {
размер шрифта: 1.2em; }
h6 {
размер шрифта: 1em;
}
CSS font-size: Подробное руководство по изменению размера шрифта
Размер шрифта в CSS звучит так, как будто это должно быть легко. Пока вы не попробуете. Многие разработчики используют силу; они возятся со свойством CSS font-size до тех пор, пока оно не выглядит правильным, только чтобы найти его в другом браузере. Небольшое понимание может иметь большое значение…
Свойство font-size
Свойство font-size
можно установить для любого HTML-тега (даже если он обычно не содержит текстового содержимого, такого как br
).Ему можно назначить множество параметров абсолютного, относительного размера или размера длины.
Элемент унаследует размер шрифта своего родителя, если вы его не переопределите. Это особенно важно при указании относительных размеров.
Абсолютный размер шрифта Ключевые слова
Доступно несколько ключевых слов с абсолютным размером шрифта. Размер шрифта определяется предустановкой браузера, и элемент не наследует размер своего родителя.
- font-size: xx-small;
- font-size: x-small;
- font-size: small;
- font-size: medium;
- font-size: large;
- font-size: x-large;
- font-size: xx-large;
Хотя большинство браузеров поддерживают эти ключевые слова, точные размеры будут отличаться.Это довольно грубый метод определения размера шрифта, и большинство разработчиков обычно его избегают.
Ключевые слова относительного размера шрифта
Доступны два ключевых слова относительного размера шрифта. Размер шрифта соответствует его родительскому элементу:
.- font-size: меньше;
- font-size: больше;
Например, если у родительского элемента размер шрифта «средний», значение «больше» установит для элемента значение «большой». Другие шрифтовые единицы обычно меняются примерно в 1 раз.2, но, опять же, стандарта нет, и результаты в браузере будут отличаться.
Абсолютные длины
Свойству font-size
можно присвоить абсолютную длину:
- мм : миллиметры, например 10мм.
- см : сантиметры, например 1 см (= 10 мм).
- в : дюймы, например 0,39 дюйма (~ = 10 мм).
- pt : точка, где 1pt обычно принимается равным 1/72 дюйма, например 12pt.
- pc : pica, где 1pc - 12pt
- пикселей : пиксель, e.грамм. 14 пикселей.
В общем, со всеми этими единицами измерения есть проблемы. Миллиметры, сантиметры и дюймы неточны для носителя на основе экрана. Точки и картинки ненадежны, так как системы могут использовать различные настройки dpi и точек на дюйм. Пиксель кажется наиболее подходящим, но это может привести к проблемам с доступностью, поскольку размер текста нельзя изменить в IE.
Относительная длина
Свойству font-size может быть назначена единица измерения относительно размера шрифта его родителя:
- em : 1em эквивалентно текущему размеру шрифта, поэтому 2em вдвое больше.
- % : 100% эквивалентно текущему размеру шрифта, поэтому 200% вдвое больше.
- ex : 1ex эквивалентно высоте буквы «x» в текущем шрифте.
Немногие разработчики используют ex, но это может быть полезно в некоторых ситуациях, когда вам нужны мелкие размеры шрифта, например 1ex, а не 0.525em.
Размеры в процентах и ’em’ эквивалентны, например 50% = 0,5em, 100% = 1em, 120% = 1,2em и т. Д. В некоторых браузерах есть небольшие различия, но это редко является серьезной проблемой.Если вы хотите сохранить каждый байт, вы можете выбрать самое короткое определение, т.е. 50% короче 0,5em, а 1em короче 100%.
Размер текста и масштабирование страницы
Вот где закрадывается дополнительная сложность. Большинство браузеров позволяют пользователю:
- увеличить или уменьшить базовый размер текста (размеры изображения не меняются)
- увеличить или уменьшить масштаб страницы, чтобы весь текст и графика изменились соответствующим образом, или
- позволяет изменять размер текста и масштабировать страницу.
Чтобы еще больше усложнить ситуацию, Internet Explorer не позволяет изменять размер текста для элементов, размер шрифта которых определяется в пикселях (px).
Если вы дизайнер, перешедший в Интернет с печатного фона, то дать пользователю столько возможностей — это неприятно. Ваш дизайн может быть испорчен, если пользователь увеличит масштаб на 200%, но уменьшит размер текста до 50%. И — нет — вы ничего не можете сделать, чтобы предотвратить это. И вам не следует.
Рекомендации по размеру шрифта CSS
По общему мнению, лучшим решением в большинстве ситуаций является «em» или «%».Веб-шрифты можно точно масштабировать относительно друг друга, а размер текста браузера поддерживается. Я бы также рекомендовал использовать процентный размер шрифта
в теге body; это приводит к лучшему изменению размера текста в некоторых старых браузерах.
Есть еще пара рекомендаций, которые я бы посоветовал при разработке сайта:
- сбросить размер шрифта и масштаб страницы до значений по умолчанию во всех ваших браузерах перед тестированием (это меня несколько раз ловило!)
- попробуйте разумных комбинаций изменения размера текста и масштабирования страницы в различных браузерах, чтобы текст оставался читабельным.
Вызывали ли когда-нибудь проблемы с изменением размера шрифта? Есть ли у вас еще какие-нибудь советы?
размеров шрифта в адаптивном дизайне: px против pt против em против процента?
Как фронтенд-разработчик, я лично люблю работать с CSS. В последнее время я много работал с адаптивным дизайном, и, как я уже отмечал в предыдущем посте о разработке для мобильных устройств, нужно помнить о форматах телефонных номеров. Еще одна вещь, о которой следует помнить при разработке для мобильных устройств, — это размер шрифта CSS.
пикселей (пикселей) как размер шрифта CSS
Пикселей фиксированного размера. Один пиксель обычно равен одной точке на экране. Поскольку пиксели имеют фиксированный размер, они не меняются. Это может быть как хорошо, так и плохо. Он позволяет веб-разработчикам создавать наиболее точные или «идеальные по пикселям» изображения веб-дизайнов. Однако, поскольку они имеют фиксированный размер, они не увеличиваются или уменьшаются. Это означает, что шрифты будут отображаться меньше на экране с более высоким разрешением, чем на экране с более низким разрешением.
пунктов (pt) как размер шрифта CSS
баллов — это единица измерения, используемая в печати. Баллы основаны на дюйме на линейке, а один дюйм равен 72 точкам. Этот модуль также сильно различается между разными браузерами и экранами при использовании в CSS. Очки очень хороши для настройки CSS для печати, чтобы решить эту проблему с браузером, но в остальном я бы не рекомендовал использовать очки для разработки веб-сайтов.
Em как размер шрифта CSS
Ems не имеют фиксированных размеров.Они масштабируемы, и по этой причине ems хорошо подходят для разработки мобильных веб-сайтов. Ems относятся к размеру шрифта, установленному в CSS. Если у вас нет одного набора в CSS, то 1 em обычно будет равняться 16px, что обычно является размером шрифта по умолчанию в браузерах. Одна плохая черта em заключается в том, что они каскадируются, что немного усложняет идеальный пиксельный дизайн.