Хтмл шрифты: Как сделать красивый шрифт в html: размеры, цвета, теги шрифтов html

Содержание

CSS: Стандартные (безопасные) шрифты

В интернете исторически сложилось такое понятие как «безопасные» Web-шрифты. Безопасным шрифтом можно назвать такой шрифт, который поддерживается операционной системой пользователя с очень высокой степенью вероятности. Поскольку о таком положении дел остаётся только мечтать, то абсолютно безопасных шрифтов не существует!

Основой для определения «безопасных» шрифтов послужили шрифты наиболее распространённой операционной системы — Windows, которые кроме того используются в других ОС:

Шрифты с засечками — serif

font-family	Пример
Georgia, serif	Это заголовок Это абзац
«Palatino Linotype», «Book Antiqua», Palatino, serif	Это заголовок Это абзац
«Times New Roman», Times, serif	Это заголовок Это абзац

font-family

Пример

Georgia, serif

Это заголовок

Это абзац

«Palatino Linotype», «Book Antiqua», Palatino, serif

Это заголовок

Это абзац

«Times New Roman», Times, serif

Это заголовок

Это абзац

Шрифты без засечек — Sans-Serif

font-family	Пример
Arial, Helvetica, sans-serif	Это заголовок Это абзац
«Arial Black», Gadget, sans-serif	Это заголовок Это абзац
«Comic Sans MS», cursive, sans-serif	Это заголовок Это абзац
Impact, Charcoal, sans-serif	Это заголовок Это абзац
«Lucida Sans Unicode», «Lucida Grande», sans-serif	Это заголовок Это абзац
Tahoma, Geneva, sans-serif	Это заголовок Это абзац
«Trebuchet MS», Helvetica, sans-serif	Это заголовок Это абзац
Verdana, Geneva, sans-serif	Это заголовок Это абзац

Моноширинные шрифты — Monospace

font-family	Пример
«Courier New», Courier, monospace	Это заголовок Это абзац
«Lucida Console», Monaco, monospace	Это заголовок Это абзац

font-family

Пример

«Courier New», Courier, monospace

Это заголовок

Это абзац

«Lucida Console», Monaco, monospace

Это заголовок

Это абзац

С этой темой смотрят:

CSS: Изменение шрифта

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

Разница между семействами шрифтов Sans-serif и Serif

PuzzleWeb.ru — шрифт sans-serif

PuzzleWeb.ru — шрифт serif

Семейства шрифтов в CSS

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

sans-serif — шрифты без засечек, считается что они лучше читаются на экране компьютера, чем шрифты семейства serif.

serif — семейство шрифтов с засечками. У многих людей они ассоциируются с газетными статьями. Засечки — декоративные штрихи и черточки по краям букв.

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

cursive — шрифты, имитирующие рукописный текст.

fantasy — художественные и декоративные шрифты. Они не очень широко распространены, доступны не на всех компьютерах и редко используются в веб-дизайне.

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


body {
  font-family: Verdana, Helvetica, Arial, sans-serif;
}

Рассмотрим, как браузер обрабатывает список шрифтов, заданный в нашем свойстве font-family:

Сначала он проверяет, установлен ли шрифт Verdana на компьютере, и, если да, использует его в качестве шрифта для текста внутри элемента (в нашем случае внутри элемента <body>)

Если Verdana не установлен, то ищет шрифт Helvetica. В случае успешного поиска использует его внутри <body>.

Если и Helvetica не установлен, то ищет шрифт Arial. Если он имеется на компьютере, то применяет его внутри <body>.

И наконец, если ни один из указанных шрифтов не найден, применяется первый, найденный браузером на компьютере шрифт из семейства sans-serif. Таким образом браузер сможет самостоятельно определить подходящий шрифт из семейства.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p.exserif { font-family: "Times New Roman", Times, serif; }
      p.exsansserif { font-family: Arial, Helvetica, sans-serif; }
    </style>
  </head>

  <body>
    <h2>CSS свойство font-family</h2>
    <p>Абзац использующий шрифт Times New Roman.</p>
    <p>Абзац использующий шрифт Arial.</p>
  </body>
</html>

Попробовать »

Примечание: при выборе только одного определенного шрифта важно понимать то, что браузер отобразит его только в том случае, если данный шрифт установлен на компьютере пользователя. Если шрифт не будет найден, то текст будет отображен шрифтом «Times New Roman», который задан по умолчанию во всех браузерах.

С этой темой смотрят:

Образцы русифицированных шрифтов. Безопасные шрифты. Примеры русифицированных шрифтов.

Браузер посетителя может отобразить только те шрифты, которые установлены в его операционной системе.

На этой странице приведен список русифицированных шрифтов, включённых в каждую версию Windows. Такие шрифты называют безопасными шрифтами для браузеров.

Распространенные русифицированные шрифты для сайта (Стандартные шрифты Windows)
Вид на странице	Название шрифта
Шрифт	— Arial
Шрифт	— Arial Cyr
Шрифт	— Arial Black
Шрифт	— Book antiqua
Шрифт	— Bookman old style
Шрифт	— Calibri
Шрифт	— Cambria
Шрифт	— Candara
Шрифт	— Century
Шрифт	— Century gothic
Шрифт	— Comic Sans Ms
Шрифт	— Consolas
Шрифт	— Constantia
Шрифт	— Corbel
Шрифт	— Courier
Шрифт	— Courier New
Шрифт	— Courier, monospace
Шрифт	— Cursive
Шрифт	— Franklin Gothic
Шрифт	— Gabriola
Шрифт	— Garamond
Шрифт	— Georgia
Шрифт	— Helvetica
Шрифт	— Impact
Шрифт	— Lucida console
Шрифт	— Lucida Sans Unicode
Шрифт	— Mistral (Mistral)
Шрифт	— monospace
Шрифт	— Monotype Corsiva
Шрифт	— MS Sans Serif
Шрифт	— MS Serif
Шрифт	— Palatino Linotype
Шрифт	— Sans-serif
Шрифт	— Segoe print
Шрифт	— Segoe script
Шрифт	— Sylfaen
Шрифт	— Tahoma
Шрифт	— Times New Roman
Шрифт	— Trebuchet ms
Шрифт	— Verdana

Примеры русифицированных шрифтов

Установка шрифта | WebReference

Выбор шрифта для оформления текста осуществляется через стилевое свойство font-family. Оно устанавливает семейство шрифтов, которое будет использоваться для оформления текста. Список шрифтов может включать одно или несколько названий, разделённых запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в двойные или одинарные кавычки.

Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берётся следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность того, что хотя бы один из них будет обнаружен на клиентском компьютере. Заканчивают список обычно ключевым словом, которое описывает тип шрифта — serif, sans-serif, cursive, fantasy или monospace. Таким образом, последовательность шрифтов лучше начинать с экзотических типов и заканчивать обобщённым именем, которое задаёт вид начертания (пример 1).

Универсальные семейства шрифтов:

serif — шрифты с засечками (антиквенные), типа Times;
sans-serif — рубленые шрифты (шрифты без засечек или гротески), типичный представитель — Arial;
cursive — курсивные шрифты, обычно подставляется Comic Sans MS;
fantasy — декоративные шрифты; как правило, в Windows используется шрифт Impact, либо текст отображается шрифтом, установленным по умолчанию;
monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова, например, шрифт Courier.

Пример 1. Установка шрифта

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Установка шрифта</title>
  <style>
   body {
    font-family: 'Times New Roman', Times, serif;
   }
   td {
    font-family: Arial, sans-serif;
   }
   h2, h3, h4 {
    font-family: Verdana, Tahoma, Arial, sans-serif;
   }
  </style>
 </head>
 <body>
  …
 </body>
</html>

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 11.03.2020

Редакторы: Влад Мержевич

УЧЕБНИК HTML для новичков — Шрифты

Шрифты

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

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

Вот некоторые шрифты: Verdana, Arial, Helvetica, Courier, Times New Roman, Impact, Comic Sans MS, Half и многие-многие другие. Мы можем написать один и тот же текст разными способами:

Шрифт Arial
Шрифт Arial black
Шрифт Arial Narrow
Шрифт Book Antiqua
Шрифт Bookman Old Style
Шрифт Comic Sans MS
Шрифт Courier
Шрифт Courier new
Шрифт Century Gothic
Шрифт Garamond
Шрифт Georgia
Шрифт Impact
Шрифт Lucida Console
Шрифт Lucida Sans Unicode
Шрифт Microsoft Sans Serif
Шрифт Helvetica
Шрифт Tahoma
Шрифт Times New Roman
Шрифт Verdana

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

Serif — шрифт с засечками. Сюда относятся шрифты: Book Antiqua, Bookman Old Style, Garamond, Georgia, Times New Roman.
Sans-serif — шрифт без засечек (sans в переводе означает «без», то есть БЕЗ засечек!). К этой группе относятся шрифты: Arial, Century Gothic, Impact, Lucida Sans Unicode, Microsoft Sans Serif, Tahoma, Verdana.
Monospace — шрифт фиксированной ширины. Сюда можно отнести Courier New, Lucida Console.
fantasy — ну, к этим шрифтам относят те, которые не вошли в первую тройку. Примером может служить Comic Sans MS.

Бывает так — вы определились со шрифтом, расписали свою страничку красивыми иероглифами, а у пользователя, как назло, такого шрифта не установлено! Что же делать? А ответ прост — Перечисляйте по порядку шрифты, которые возможно, у него есть, а заканчивайте строчку семейством шрифтов. Например:

А тут отобразится тот шрифт, которые имеется у клиента, начиная с Times New Roman, и далее по перебору

Так что будьте уверены, браузер пользователя сначала поищет у себя шрифт Times New Roman, и если такого шрифта не обнаружит, побежит искать Garamond. Если и такого шрифта не отыщется, попробует последний шанс — Georgia или любой другой из семейства serif. Если же и этого шрифта не окажется, то тогда поставит тот шрифт, который у пользователя установлен по умолчанию. И на этом успокоится.

Обратите внимание, что если название шрифта более одного слова, то оно заключается в кавычки, например «Times New Roman», одиночные названия могут употребляться как с кавычками, так и без кавычек.

HTML-письма — как правильно подключить шрифты

В почтовых рассылках допускается использование только стандартных
шрифтовых наборов, которые присутствуют на всех устройствах.
Представляю вашему вниманию список безопасных шрифтов, которые есть на
всех устройствах.
font-family: Arial, Helvetica, sans-serif;
font-family: 'Arial Black', Gadget, sans-serif;
font-family: Georgia, serif;
font-family: 'MS Sans Serif', Geneva, sans-serif;
font-family: 'MS Serif', 'New York', sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: 'Times New Roman', Times, serif;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
Таким образом, эти шрифты можно использовать в рассылках без страха и
риска. Если вы все же хотите использовать совсем нестандартные шрифты
через правило @font-face, то будьте внимательными, это правило
работает только в IOS, Google mail и Android 4 (Gmail).

источник

P.S: вот такая конструкция в head позволяет гугл шрифты подключить, но за поддержку не скажу:

<!-- Web Font / @font-face : BEGIN -->
    <!-- NOTE: If web fonts are not required, lines 9 - 26 can be safely removed. -->

    <!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
    <!--[if mso]>
        <style>
            * {
                font-family: sans-serif !important;
            }
        </style>
    <![endif]-->

    <!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
    <!--[if !mso]><!-->
        <!-- insert web font reference, eg: <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> -->
    <!--<![endif]-->

  <!-- Web Font / @font-face : END -->

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

seodon.ru | Учебник HTML — Как изменить шрифт?

Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

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

Изменение стилей шрифтов

Изменять стили написания шрифтов в HTML можно далеко не одним способом и вы скоро в этом убедитесь. А теперь давайте рассмотрим несколько новых тегов:

… и … — выделяют текст полужирным шрифтом.

… и … — выделяют текст курсивом.

… — выводит текст в верхнем индексе, например E = mc².

… — выводит текст в нижнем индексе, например H₂SO₄.

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

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

Вы спросите: «Но неужели указанные выше теги — это все, чем можно выделить текст в HTML»? Ну конечно же нет! Существуют еще теги <S> и <STRIKE>, подчеркивающие текст, а также тег , отображающий зачеркнутый текст. Но, видите ли, эти теги являются устаревшими в HTML и их, как и атрибут align, возможно скоро перестанут понимать браузеры. Поэтому я вам покажу другой способ, который вы можете использовать без опаски. А заключается он в применении атрибута style, причем его допустимо указывать внутри любых тегов. Общий синтаксис следующий:

<тег>…</тег> — подчеркивает текст.

<тег>…</тег> — надчеркивает текст.

<тег>…</тег> — зачеркивает текст.

Пример изменения стилей шрифтов

<!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=Windows-1251">
<title>Изменение стилей шрифтов</title>
</head>
<body>
<p><b>Жирный шрифт.</b> <i>Курсив.</i></p>

<p><b><i>Жирный курсив.</i></b></p>

<p><em>H<sub>2</sub>SO<sub>4</sub></em> - формула серной кислоты написанная курсивом.</p>

<p>Подчеркнутый параграф текста.</p>

<p>Обычный текст,
   <strong>зачеркнутый жирный.</strong>
</p>
</body>
</html>

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

Жирный шрифт. Курсив.

Жирный курсив.

H₂SO₄ — формула серной кислоты написанная курсивом.

Подчеркнутый параграф текста.

Обычный текст, зачеркнутый жирный.

Теперь хотелось бы сделать одно пояснение по поводу атрибута style. Style — это абсолютно обычный атрибут тегов, но относится он к Каскадным таблицам стилей (CSS). В далеком прошлом все функции по структуризации HTML-страницы в целом и по внешнему представлению ее каждого элемента в отдельности (цвет, форма, положение на странице и т.д.) брал на себя язык HTML. Но потом разработчики языка решили разграничить эти функции и создали CSS. Соответственно многие теги или атрибуты тегов стали устаревшими. Поэтому, чтобы не забивать вам голову ненужной информацией, в данном учебнике я тоже заменил их стилями, то есть атрибутом style. Его общий синтаксис следующий:

<тег>…</тег>

Используя style вы совершенно ничего не потеряете, но зато научитесь писать грамотный HTML, а в качестве бонуса еще и CSS немного освоите.

Тег или что делать, когда нет нужных тегов

Ну что, пока все понятно? Хорошо, тогда вопрос. А что вы будете делать, если вам, например, надо зачеркнуть не весь параграф, а только половину текста, причем не делать его ни жирным, ни курсивом? Ну да не переживайте, тут вам поможет один очень удобный и нужный тег.

Итак, знакомьтесь — …. Этот тег тоже является встроенным (inline, уровня строки) и может содержать любые встроенные теги, но главное не это. Сам по себе , без атрибутов, не добавляет никаких изменений ни тексту, ни тегам находящимся внутри него. А создан он был специально для стилей, то есть, по сути, для атрибута style. Именно благодаря этому атрибуту, а вернее его разным значениям, у появляются те или иные свойства. Вот так, а теперь изучаем пример.

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

<!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=Windows-1251">
<title>Использование тега SPAN</title>
</head>
<body>
<p><span>Обычный текст без изменений.</span></p>

<p>Еще обычный текст.
 <span>Подчеркнутый.</span>
 <span>Зачеркнутый.</span>
</p>
</body>
</html>

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

Обычный текст без изменений.

Еще обычный текст. Подчеркнутый. Зачеркнутый.

Меняем имя (гарнитуру) шрифта

Не знаете что такое имя шрифта? Наверняка многие из вас хоть когда-то набивали текст в Microsoft Word или OpenOffice Writer и видели такое меню:

Меню выбора шрифта в Microsoft Word.

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

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

Шрифты	Семейство
‘Comic Sans MS’	cursive (рукописные)
Courier	monospace (моноширинные)
Arial, Helvetica, Verdana, Tahoma	sans-serif (рубленные, гротески)
Times, ‘Times New Roman’, Garamond	serif (с засечками, антиква)

По умолчанию практически все браузеры используют шрифт ‘Times New Roman’, а чтобы его изменить используется все тот же атрибут style, который можно применить внутри любого тега. Общий синтаксис указания следующий:

<тег>…</тег>

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

Чтобы изменить шрифт на всей странице — достаточно указать атрибут style в теге <BODY>. А если необходимо изменить шрифт для отдельной части текста, то заключите его в тег и примените атрибут к нему.

Пример изменения имени шрифтов

<!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=Windows-1251">
<title>Изменение имени шрифтов</title>
</head>
<body>
 <p>Это шрифт Arial, если его нет, то Verdana, а если
    и его нет, то любой другой из sans-serif.
 </p>

 <p>
    Это Comic Sans MS или любой cursive.
 </p>

 <p>Это опять Arial, Verdana или любой sans-serif.
    <span>
      А это Courier или любой monospace.
    </span>
 </p>
</body>
</html>

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

Это шрифт Arial, если его нет, то Verdana, а если и его нет, то любой другой из sans-serif.

Это Comic Sans MS или любой cursive.

Это опять Arial, Verdana или любой sans-serif. А это Courier или любой monospace.

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

Меняем размер шрифта

Язык HTML ограничен всего семью размерами шрифтов, что, согласитесь, очень мало для хорошего сайта. Поэтому для изменения размеров все давно используют CSS, и сейчас вы тоже этому научитесь.

В CSS есть порядка десяти единиц измерения, но мы с вами рассмотрим только три самых популярных — это пункты (pt), пиксели (px) и проценты (%). Итак:

pt — Пункты. Один пункт равен 1/72 дюйма, а один дюйм — 2.54см. Следовательно, 1pt = 0,03527778см. Это абсолютная величина, так как размер заданный в пунктах не зависит ни от чего.
px — Пиксели. Измеряется в пикселях монитора компьютера. Пиксель — это самая маленькая точка на мониторе и она является относительной величиной, так как ее размер зависит от текущего разрешения экрана и размера самого монитора.
% — Проценты. Высчитывается в процентах, где за 100% берется значение родительского тега, а если оно не указано, то значение в браузере по умолчанию. Это тоже относительная величина, ведь размер шрифта родителя может быть абсолютно разный, да и размер шрифта в браузере пользователи могут свободно менять.

Чтобы указать размер шрифта используется атрибут style и его можно указать внутри любого тега. Общий синтаксис такой:

<тег>…</тег>

Как и в случае с именами шрифтов, чтобы изменить размер шрифта на всей странице — достаточно указать атрибут style в теге <BODY>. А если необходимо изменить шрифт для фрагмента текста, то заключите его в тег и примените атрибут к нему.

Пример изменения размера шрифтов

<!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=Windows-1251">
<title>Изменение размера шрифта</title>
</head>
<body>
 <p>Этот размер шрифта составляет 90% от размера
    в браузере по умолчанию.
 </p>
 <p>
    Этот размер составляет 90% уже от размера в теге BODY.
 </p>

 <h5>
  Размер шрифта заголовка составляет 120% от размера в BODY.
 </h5>
 
 <p>Это опять 90% от размера в браузере по умолчанию.
    <span>
      Размер этого шрифта 15 пунктов.
    </span>
 </p>
</body>
</html>

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

Этот размер шрифта составляет 90% от размера в браузере по умолчанию.

Этот размер составляет 90% уже от размера в BODY.

Размер шрифта заголовка составляет 120% от размера в BODY.

Это опять 90% от размера в браузере по умолчанию. Размер этого шрифта 15 пунктов.

Размер шрифта зависит не только от его явного указания, но и от его имени (гарнитуры) — разные шрифты могут иметь совершенно разные высоту и ширину букв, а также межбуквенное расстояние.

Еще немного об атрибуте style

Самое время раскрыть вам еще один секрет этого чудесного атрибута, но опять сначала задам вам вопрос. Как бы вы поступили, если бы вам надо было установить для всего параграфа имя шрифта Arial с размером в 80%? А я вам скажу, вы бы написали что-то подобное:

Так.

<p>
 <span>
  Текст параграфа.
 </span>
</p>

Вот так.

<p>
 <span>
  <span>
   Текст параграфа.
  </span>
 </span>
</p>

Или вообще вот так.

<p>
   Текст параграфа.
</p>

Я прав? Ну что ж, если первые два варианта в принципе верны, то последний вообще с ошибкой, так как, если помните, в одном теге не может быть двух одинаковых атрибутов. А теперь пора вспомнить, что style — не просто атрибут, а атрибут относящийся к CSS. Посмотрите-ка на это:

<p>
   Текст параграфа.
</p>

Гораздо проще, да? Самое главное не забывать ставить между соседними стилями точку с запятой (;) и брать все это «хозяйство» в двойные кавычки (» «), иначе применится только первый стиль, а остальные браузер проигнорирует. Ну мы ведь всегда с вами проставляем двойные кавычки, правда?

Так, этот урок вышел очень насыщенным, поэтому сделайте домашнее задание и немного отдохните.

Домашнее задание.

Создайте заголовок статьи и двух ее разделов, но заголовки разделов еще и подчеркните.
Сделайте так, чтобы при наведении курсора мыши на заголовок статьи появлялась соответствующая надпись.
Напишите один параграф в начале статьи и по два в каждом разделе.
Установите для всей страницы шрифт Arial с размером 90% от размера в браузере по умолчанию.
Установите для всех заголовков шрифт Times и пусть заголовок статьи будет с размером шрифта в 150%, а подзаголовки — 120%.
Выделите в первом параграфе два слова жирным шрифтом и одно курсивом. Во втором — фразу из нескольких слов жирным курсивом. В третьем — подчеркните фразу выделенную курсивом. В четвертом — зачеркните половину фразы выделенной жирным.
Напишите в последнем параграфе формулу спирта: C₂H₅OH.

Посмотреть результат → Посмотреть ответ

CSS безопасных веб-шрифтов

Лучшие безопасные веб-шрифты для HTML и CSS

Следующий список — лучшие веб-безопасные шрифты для HTML и CSS:

Arial (без засечек)
Verdana (без засечек)
Helvetica (без засечек)
Тахома (без засечек)
Требушет MS (без засечек)
Times New Roman (с засечками)
Грузия (с засечками)
Гарамонд (с засечками)
Courier New (моноширинный)
Brush Script MT (курсив)

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

Arial (без засечек)

Arial — наиболее широко используемый шрифт как в Интернете, так и в печатных СМИ.Arial
также является шрифтом по умолчанию в Документах Google.

Arial — один из самых безопасных веб-шрифтов, доступный во всех основных операционных системах.

Verdana (без засечек)

Verdana — очень популярный шрифт. Verdana легко читается даже при небольшом размере шрифта.

Helvetica (без засечек)

Шрифт Helvetica полюбился дизайнерам. Подходит для многих видов бизнеса.

Тахома (без засечек)

В шрифте Tahoma меньше места между символами.

Trebuchet MS (без засечек)

Trebuchet MS был разработан Microsoft в 1996 году. Используйте этот шрифт осторожно. Нет
поддерживается всеми мобильными операционными системами.

Times New Roman (с засечками)

Times New Roman — один из самых узнаваемых шрифтов в мире. Это выглядит
профессиональный и используется во многих газетах и «новостных» сайтах. Это также
основной шрифт для устройств и приложений Windows.

Грузия (с засечками)

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

Гарамонд (с засечками)

Garamond — классический шрифт, используемый во многих печатных книгах. Он вневременной
внешний вид и хорошая читаемость.

Courier New (моноширинный)

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

Brush Script MT (курсив)

Шрифт Brush Script MT был разработан для имитации почерка.
Он элегантный и изысканный, но его трудно читать. Используйте его осторожно.

Совет: Также проверьте все доступные шрифты Google и способы их использования.

CSS Веб-безопасные шрифты

Что такое безопасные веб-шрифты?

Веб-безопасные шрифты — это шрифты, которые универсально устанавливаются во всех браузерах и на всех устройствах.

Резервные шрифты

Однако не существует 100% полностью безопасных веб-шрифтов. Всегда есть
вероятность того, что шрифт не найден или установлен неправильно.

Поэтому очень важно всегда использовать резервные шрифты.

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

Пример

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

p {
font-family: Tahoma, Verdana, без засечек;
}

Попробуй сам »

Лучшие безопасные веб-шрифты для HTML и CSS

Следующий список — лучшие веб-безопасные шрифты для HTML и CSS:

Arial (без засечек)
Verdana (без засечек)
Helvetica (без засечек)
Тахома (без засечек)
Требушет MS (без засечек)
Times New Roman (с засечками)
Грузия (с засечками)
Гарамонд (с засечками)
Courier New (моноширинный)
Brush Script MT (курсив)

Arial (без засечек)

Arial — один из самых безопасных веб-шрифтов, доступный во всех основных операционных системах.

Verdana (без засечек)

Verdana — очень популярный шрифт. Verdana легко читается даже при небольшом размере шрифта.

Helvetica (без засечек)

Шрифт Helvetica полюбился дизайнерам. Подходит для многих видов бизнеса.

Тахома (без засечек)

В шрифте Tahoma меньше места между символами.

Trebuchet MS (без засечек)

Times New Roman (с засечками)

Грузия (с засечками)

Гарамонд (с засечками)

Courier New (моноширинный)

Brush Script MT (курсив)

Совет: Также проверьте все доступные шрифты Google и способы их использования.

Полный список безопасных для Интернета шрифтов HTML и CSS

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

В частности, он играет решающую роль в создании уникальной идентичности бренда.Вы, вероятно, заметите определенные «стандартные» шрифты, связанные с известными брендами, особенно в их логотипах. Например, у Facebook, Amazon, Disney и Microsoft есть разные шрифты, которые их отличают. Большинство из них изготавливаются на заказ и являются вариациями существующих шрифтов.

Не так давно одни и те же однообразные шрифты появлялись почти на каждом веб-сайте, независимо от отрасли или бренда. Было сложно реализовать уникальные шрифты, потому что не было возможности правильно отображать их во всех браузерах.

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

Что такое веб-шрифты?

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

Ранее, если на компьютере пользователя не был установлен шрифт вашего веб-сайта, его браузер отображал общий шрифт в качестве резервной копии, например Times New Roman.

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

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

Какие бывают типы веб-шрифтов?

Для веб-шрифтов вы можете использовать шрифты с засечками, без засечек, моноширинные, курсивные, фэнтезийные и MS шрифты.

Шрифты с засечками содержат засечки, небольшие декоративные штрихи, которые выступают из основной части письма. Шрифты с засечками легче читать в физических печатных форматах, поскольку они ведут взгляд зрителя от символа к символу. Times New Roman — это шрифт с засечками.
Шрифты без засечек не имеют засечек.Шрифты без засечек легче читать на экранах, поэтому они гораздо чаще встречаются при копировании веб-сайтов. Arial — это шрифт без засечек.
Моноширинный относится к шрифтам с одинаковым интервалом между символами. Courier — это моноширинный шрифт.
Cursive относится к шрифтам, напоминающим рукописный текст. Brush Script MT — это курсивный шрифт.
Fantasy относится к стилизованным декоративным шрифтам. Luminari — это фантастический шрифт.
MS означает Microsoft и указывает на то, что шрифт был создан Microsoft для цифровых устройств.Trebuchet MS является примером.

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

Но это просто неправда. Давайте обсудим, почему веб-шрифты по-прежнему важны сегодня.

Нужны ли еще веб-безопасные шрифты?

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

Веб-шрифты — это самый простой способ гарантировать удобство работы пользователей в случае, если выбранный вами шрифт загружается некорректно. Возможно, вы выбрали самый красивый шрифт из Google Fonts, но если вы не объедините его с безопасным для Интернета шрифтом в своем стеке шрифтов CSS, вы рискуете отобразить текст, который будет выглядеть на вашем сайте небрендовым.

Представьте себе, например, рендеринг сайта HubSpot в Times New Roman — все потому, что мы не установили предпочитаемый веб-шрифт на серверной части. Time New Roman полностью безопасен в Интернете — проблема в том, что он по умолчанию установлен браузером, поэтому наш веб-сайт в конечном итоге выглядит непоследовательным и, ну, немного небрендовым.

Вот несколько причин, по которым вы захотите использовать веб-шрифты.

1. Ваш HTML-текст останется неизменным.

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

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

2. Перед тем, как по умолчанию использовать предпочтительный веб-шрифт, в браузере будет несколько параметров.

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

Это позволит вашему шрифту «плавно ухудшиться». Вместо того, чтобы переключаться с Playfair Display прямо на Times New Roman, шрифт может перейти с Playfair Display на Didot, гораздо более близкую альтернативу.Если Didot недоступен, шрифт можно изменить на Georgia и, наконец, на шрифт с засечками по умолчанию, используемый браузером.

3. У вас будет несколько резервных копий, если вы используете собственный шрифт.

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

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

Стеки шрифтов

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

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

Чтобы создать стек шрифтов, добавьте несколько связанных имен шрифтов в свойство font-family .Шрифты должны быть упорядочены по приоритету — шрифт, который вам нужен больше всего, должен отображаться первым, а общее семейство шрифтов должно завершать список. Вот пример:

  p {font-family: «Playfair Display», «Didot», «Times New Roman», Times, serif; }

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

Нужно ли мне загружать веб-шрифты, чтобы использовать их в стеке шрифтов?

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

Давайте теперь перейдем к некоторым из лучших веб-шрифтов, которые вы можете использовать.

Веб-безопасные шрифты

Arial (без засечек)
Arial Black (без засечек)
Verdana (без засечек)
Тахома (без засечек)
Требушет MS (без засечек)
Impact (без засечек)
Times New Roman (с засечками)
Дидо (с засечками)
Грузия (с засечками)
Американская пишущая машинка (с засечками)
Andalé Mono (моноширинный)
Курьер (моноширинный)
Консоль Lucida (моноширинный)
Монако (монокосмический)
Брэдли Хэнд (курсив)
Brush Script MT (курсив)
Luminari (фэнтези)
Comic Sans MS (курсив)

1.Arial (без засечек)

Arial — самый широко используемый шрифт без засечек в Интернете. Он был создан для типографий, которые хотели использовать популярный шрифт Helvetica без лицензионных сборов. Следовательно, они практически идентичны.

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

2. Arial Black (без засечек)

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

3. Verdana (без засечек)

Verdana пользуется популярностью как в сети, так и за ее пределами. Хотя он напоминает Arial и Helvetica, он имеет простую структуру, благодаря которой буквы становятся крупными и четкими. Некоторые из его персонажей имеют удлиненные линии, что может быть несовместимо с некоторыми рисунками. В остальном это отличная альтернатива Arial.

4. Тахома (без засечек)

Подобно Verdana, шрифт Tahoma отличается более жирным весом и более узким трекингом (т.е.е. меньше места между символами).

5. Trebuchet MS (без засечек)

Trebuchet MS — еще один безопасный для Интернета шрифт без засечек, разработанный корпорацией Microsoft в 1996 году. Он обычно используется для основного текста многих веб-сайтов и может быть надежной альтернативой шрифту без засечек на вашем сайте. Он также может выглядеть не таким «базовым», как Arial.

6. Impact (без засечек)

Impact — это тяжелый шрифт без засечек, который отлично подходит для привлечения внимания и создания … ну, впечатления. Он также отличается особенно узким шрифтом — его символы имеют более высокое отношение ширины к высоте, чем другие сопоставимые шрифты.

Impact был впервые представлен на цифровых устройствах в Microsoft Windows в 1998 году, и с тех пор наблюдается возрождение популярности интернет-мемов, наложенных поверх изображений для создания юмористического эффекта.

7. Times New Roman (с засечками)

Times New Roman — лучший шрифт с засечками. Это чрезвычайно популярный и основной шрифт для устройств и приложений Windows, таких как Microsoft Word. Браузеры возвращаются к нему, если указанный шрифт не отображается.

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

8. Didot (с засечками)

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

9. Грузия (с засечками)

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

10. Американская пишущая машинка (с засечками)

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

11. Andalé Mono (моноширинный)

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

Andalé Mono — прекрасный пример моноширинного шрифта. Этот вариант без засечек был разработан Apple и IBM и часто используется в средах разработки программного обеспечения.

12. Курьер (моноширинный)

Courier — это моноширинный шрифт с засечками, очень напоминающий текст на пишущей машинке.Многие поставщики услуг электронной почты используют его в качестве шрифта по умолчанию. Он также широко используется с дисплеями приложений для кодирования.

Обратите внимание, что шрифт Courier New принадлежит к тому же семейству, что и Courier. Вы можете указать Courier после Courier New в стеке шрифтов, чтобы предоставить браузеру два разных, но похожих параметра.

13. Консоль Lucida (моноширинный)

Консоль

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

14. Монако (монокосмический)

Моноширинный шрифт без засечек Monaco является родным для macOS и в результате будет более знаком пользователям Apple.

15. Брэдли Хэнд (курсив)

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

16. Brush Script MT (курсив)

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

17. Луминари (фантазия)

Шрифты

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

18. Comic Sans MS (курсив)

Наконец-то мы подошли к шрифту, над которым все любят подшучивать, — Comic Sans.Comic Sans MS, созданный для имитации стиля надписей в комиксах, несет неформальный оттенок и стал целью многих интернет-шуток.

Тем не менее, Comic Sans полезен по причинам доступности: поскольку в нем отсутствуют похожие буквенные формы, такие как p / q и b / d, люди с дислексией, как правило, испытывают меньше трудностей с ним, чем с обычными шрифтами.

Используйте безопасные веб-шрифты CSS и HTML для своих проектов

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

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

Примечание редактора: этот пост был первоначально опубликован в марте 2020 года и был обновлен для полноты.

CSS: шрифты

CSS: шрифты

См. Также указатель всех подсказок.

На этой странице:

Семейства шрифтов

После цвета шрифт, вероятно, является самым основным свойством
страница. На этой странице я не буду показывать «фокусы», но покажу
диапазон вариаций шрифта, допускаемых CSS.

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

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

Семейство шрифтов	Ваш браузер	Пример изображения
‘sans-serif’: обычные шрифты без засечки
`Arial, без засечек`	Быстрая коричневая лисица Прыгает через ленивую собаку
`Helvetica, без засечек`	Быстрый коричневый Лиса перепрыгивает через ленивую собаку
`Verdana, без засечек`	Быстрая коричневая лисица Прыгает через ленивую собаку
`Trebuchet MS, без засечек`	Быстрый Коричневая лиса перепрыгивает через ленивую собаку
`Gill Sans, без засечек`	Быстрый коричневый Лиса перепрыгивает через ленивую собаку
`Noto Sans, sans-serif`	Быстрый коричневый Лиса перепрыгивает через ленивую собаку
`Avantgarde, TeX Gyre Adventor, URW Gothic L, без засечек`	Быстрая коричневая лисица перепрыгивает через ленивую собаку
`Optima, без засечек`	Быстрая коричневая лисица Прыгает через ленивую собаку
`Arial Narrow, без засечек`	Быстрый Коричневая лиса перепрыгивает через ленивую собаку
`без засечек`	Быстрые прыжки с коричневой лисой Над ленивым псом
‘serif’: обычные шрифты с засечками
`Times, Times New Roman, serif`	Быстрый Коричневая лиса перепрыгивает через ленивую собаку
`Didot, serif`	Быстрые прыжки с коричневой лисой Над ленивым псом
`Джорджия, с засечками`	Быстрая коричневая лисица Прыгает через ленивую собаку
`Palatino, URW Palladio L, serif`	The Быстрая коричневая лисица перепрыгивает через ленивую собаку
`Bookman, URW Bookman L, serif`	Быстрый Коричневая лиса перепрыгивает через ленивую собаку
`New Century Schoolbook, TeX Gyre Schola, serif`	Быстрая коричневая лисица перепрыгивает через ленивую собаку
`Американская пишущая машинка, с засечками`	Быстрый Коричневая лиса перепрыгивает через ленивую собаку
`с засечками`	Быстрая коричневая лисица перепрыгивает Ленивая собака
‘моноширинный’: шрифты фиксированной ширины
`Andale Mono, моноширинный`	Быстрый коричневый Лиса перепрыгивает через ленивую собаку
`Courier New, моноширинный`	Быстрый коричневый Лиса перепрыгивает через ленивую собаку
`Курьер, моноширинный`	Быстрая коричневая лисица Прыгает через ленивую собаку
`FreeMono, моноширинный`	Быстрая коричневая лисица Прыгает через ленивую собаку
`OCR A Std, моноширинный`	Быстрый коричневый Лиса перепрыгивает через ленивую собаку
`DejaVu Sans Mono, моноширинный`	Быстрый Коричневая лиса перепрыгивает через ленивую собаку
`монокосмический`	Быстрые прыжки с коричневой лисой Над ленивым псом
‘cursive’: шрифты, имитирующие почерк.
`Comic Sans MS, Comic Sans, курсив`	The Быстрая коричневая лисица перепрыгивает через ленивую собаку
`Apple Chancery, курсив`	Быстрый коричневый Лиса перепрыгивает через ленивую собаку
`Bradley Hand, курсив`	Быстрый коричневый Лиса перепрыгивает через ленивую собаку
`Brush Script MT, Brush Script Std, курсив`	Быстрая коричневая лисица перепрыгивает через ленивую собаку
`Snell Roundhand, курсив`	Быстрый Коричневая лиса перепрыгивает через ленивую собаку
`URW Chancery L, курсив`	Быстрый коричневый Лиса перепрыгивает через ленивую собаку
`курсив`	Быстрая коричневая лисица перепрыгивает Ленивая собака
«фэнтези»: декоративные шрифты для заголовков и т. Д.
`Удар, фантазия`	Быстрая коричневая лисица Прыгает через ленивую собаку
`Luminari, фэнтези`	Быстрая коричневая лисица Прыгает через ленивую собаку
`Мел, фантазия`	Быстрый коричневый Лиса перепрыгивает через ленивую собаку
`Jazz LET, фэнтези`	Быстрая коричневая лисица Прыгает через ленивую собаку
`Блиппо, фэнтези`	Быстрая коричневая лисица Прыгает через ленивую собаку
`Stencil Std, фантазия`	Быстрый коричневый Лиса перепрыгивает через ленивую собаку
`Маркер Войлок фантазия`	Быстрый коричневый Лиса перепрыгивает через ленивую собаку
`Траттателло, фэнтези`	Быстрый коричневый Лиса перепрыгивает через ленивую собаку
`фантазия`	Быстрая коричневая лисица перепрыгивает Ленивая собака

Стили шрифта

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

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

правило	засечки	без засечек
Стили
`стиль шрифта: нормальный`	Быстрый…	Быстрый…
`стиль шрифта: курсив`	Быстрый…	Быстрый…
`стиль шрифта: наклонный`	Быстрый…	Быстрый…
Масса
`font-weight: 100`	Быстрый…	Быстрый…
`font-weight: 200`	Быстрый…	Быстрый…
`font-weight: 300`	Быстрый…	Быстрый…
`font-weight: normal`	Быстрый…	Быстрый…
`font-weight: 500`	Быстрый…	Быстрый…
`font-weight: 600`	Быстрый…	Быстрый…
`font-weight: bold`	Быстрый…	Быстрый…
`вес шрифта: 800`	Быстрый…	Быстрый…
`вес шрифта: 900`	Быстрый…	Быстрый…
Варианты
`вариант шрифта: нормальный`	Быстрый…	Быстрый…
`вариант шрифта: small-caps`	Быстрый…	Быстрый…
Растяжка
`font-stretch: сверхконденсированный`	Быстрый…	Быстрый…
`font-stretch: сверхконденсированный`	Быстрый…	Быстрый…
`font-stretch: сжатый`	Быстрый…	Быстрый…
`font-stretch: полуконденсированный`	Быстрый…	Быстрый…
`font-stretch: normal`	Быстрый…	Быстрый…
`font-stretch: частично развернутый`	Быстрый…	Быстрый…
`font-stretch: расширенный`	Быстрый…	Быстрый…
`font-stretch: сверхразвернутый`	Быстрый…	Быстрый…
`font-stretch: сверхрасширенный`	Быстрый…	Быстрый…

Модуль CSS Fonts имеет дополнительные свойства, чтобы указать специальные
стили (для шрифтов с несколькими вариантами), в частности
Свойство font-variant имеет гораздо больше значений.

30+ лучших веб-шрифтов для вашего следующего дизайна в 2021 году

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

И если бы вы могли найти веб-безопасные шрифты, которые а) на 100% бесплатны и б) не нужно размещать где-либо еще, чтобы ваши посетители могли их увидеть, это было бы быть для тебя хоумраном.

Именно для этого и был написан этот пост: мы рассмотрим 31 самый красивый веб-безопасный шрифт и покажем вам, как именно внедрить их на свой сайт WordPress.

Воспользуйтесь приведенными ниже ссылками, чтобы перейти в наиболее интересующий вас раздел, или перейдите непосредственно к нашему списку веб-безопасных шрифтов:

Какие шрифты безопасны для Интернета?

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

Примером может служить вездесущий шрифт Arial, породивший тысячи «побочных продуктов».

Нужны ли безопасные веб-шрифты в 2021 году?

Доля рынка браузеров 2019-2020 (Источник изображения: StatCounter)

Конечно, сейчас подавляющее большинство пользователей используют Google Chrome как на мобильных устройствах, так и на компьютерах. Но это не значит, что веб-безопасные шрифты ушли в прошлое.

Фактически, поддерживаемые шрифты различаются в зависимости от операционной системы, включая текущую версию, установленную пользователем. Поэтому, если вы создаете веб-сайт со шрифтом, поддерживаемым только новейшей версией Windows 10, большинство пользователей увидят что-то еще.

Кроме того, если вы решите использовать и разместить собственный локальный шрифт или шрифт, размещенный на стороннем сервере, это может замедлить работу вашего веб-сайта. Таким образом, переход на безопасные веб-шрифты может ускорить работу вашего сайта. И это здорово. Потому что почти 70% потребителей говорят, что скорость загрузки страниц влияет на их решения о покупке.

Безопасны ли веб-шрифты Google?

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

Веб-безопасные шрифты уже имеют готовые файлы шрифтов на большинстве устройств. Но не беспокойтесь о том, что нет слова «безопасно». Шрифты Google абсолютно безопасны для улучшения дизайна вашего веб-сайта. Но дополнительные HTTP-запросы к внешнему серверу могут замедлить скорость загрузки вашей страницы.

Эти безопасные веб-шрифты а) абсолютно бесплатны для использования ✅ и б) их не нужно размещать где-либо еще, чтобы посетители могли их увидеть ✅ Все 30+ вариантов здесь ⬇️Нажмите, чтобы твитнуть

31+ лучших веб-безопасных шрифтов

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

Давайте прямо в это дело.

1. Arial

Пример шрифта Arial

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

2. Баскервиль

Пример шрифта Baskerville

Baskerville — это относительно толстый шрифт с засечками, первоначально разработанный как гарнитура Джоном Баскервиллем в 1750 году.Дизайн хорошо сбалансирован, с использованием сочетания толстых и тонких штрихов, чтобы смягчить резкие грани типичного шрифта с засечками. Он хорошо поддерживается более новыми версиями ОС Apple и Microsoft.

3. Bodoni MT / Bodoni 72

Пример шрифта Bodoni MT

Bodoni MT — это шрифт с засечками, аналогичный Times New Roman, который больше подходит для текста абзаца, чем для заголовков на большинстве веб-сайтов.Bodoni MT по умолчанию доступен с Microsoft 10 и некоторыми более ранними версиями. Bodoni 72 входит в состав macOS Sierra и более новых версий.

4. Калибри

Пример шрифта Calibri

Calibri — это стандартный шрифт Microsoft без засечек, который используется с момента его выпуска в Microsoft Office 2007. Он имеет мягкий современный вид с закругленными краями, подчеркивающими типичный вид без засечек, что делает его более теплым, чем роботизированный.

5. Calisto MT

Пример шрифта Calisto MT

Calisto MT — это шрифт с засечками, имеющий несколько более мягкие и менее выраженные засечки, чем у большинства аналогичных гарнитур. Это стандартный шрифт Microsoft, включенный в большинство новых версий Windows. Эквивалент для macOS или iOS — шрифт Bookman Old Style.

6. Камбрия

Пример шрифта Cambria

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

7. Чандара

Пример шрифта Candara

Candara — это шрифт без засечек. Это часть коллекции шрифтов Microsoft ClearType.Эквивалент для macOS и iOS — Optima Regular. Неравномерный вес штрихов делает его немного менее современным и корпоративным, чем другие шрифты без засечек.

8. Вековая готика

Пример шрифта Century Gothic

Century Gothic — это геометрический шрифт без засечек, имеющий очень чистый и сбалансированный вид. Это отличный шрифт для Интернета, особенно для заголовков и подзаголовков.Изначально он был разработан, чтобы конкурировать со шрифтом Futura. Он входит в состав большинства операционных систем Microsoft и Apple.

9. Консолас

Пример шрифта Consolas

Consolas — это шрифт без засечек с уникальным подходом к дизайну. Все символы имеют одинаковую ширину, поэтому засечки используются только для буквы «I» и строчной буквы «l». Это часть коллекции ClearType.

10. Медная готика

Пример шрифта Copperplate Gothic

Copperplate Gothic — это шрифт в готическом стиле с небольшими глифическими засечками на некоторых буквах. Поскольку он вдохновлен готическими рунами, строчных шрифтов здесь нет.

11. Courier New

Courier New, пример шрифта

Courier New — это моноширинный шрифт с плоскими засечками с гораздо более тонким обычным текстом, чем в большинстве других шрифтов с засечками и без засечек.Он имеет почти идеальное покрытие как Microsoft, так и Apple как на компьютерах, так и на мобильных устройствах.

12. Дежавю Санс

Пример шрифта Dejavu Sans

Dejavu Sans — это шрифт без засечек с чистыми прямыми линиями, почти возврат к классическим шрифтам без засечек, таким как Arial и Verdana.

13. Дидо

Пример шрифта Didot

Didot — это шрифт, вдохновленный оригинальными гарнитурами Didot, которые использовались французской типографией 19 века, семьей Didot. Это основа Apple, поддерживаемая большинством их ОС и устройств.

14. Франклин Готика

Пример шрифта Franklin Gothic

Franklin Gothic — это шрифт без засечек с необычно толстыми буквами, почти как полужирная версия другого шрифта.Оригинальный шрифт был разработан в начале 20 века американскими основателями шрифтов. Это хороший выбор шрифта для заголовков, но может быть не лучшим выбором для основного текста.

15. Гарамонд

Пример шрифта Garamond

Garamond — это шрифт с засечками, вдохновленный шрифтами парижского гравера 16-го века Клода Гарамонда. У него более мягкие и округлые края, чем у некоторых более стандартных шрифтов с засечками, таких как Times New Roman.Современные версии Microsoft и Apple OS включают собственные версии шрифта Garamond.

16. Грузия

Пример шрифта Georgia

Близкий родственник Garamond, Georgia — еще один шрифт с засечками с в основном закругленными краями и довольно теплым ощущением. Он был разработан для Microsoft в 1996 году и до сих пор остается одним из самых распространенных шрифтов MS.Он поддерживается практически всеми версиями Windows и macOS.

17. Гилл Санс

Пример шрифта Gill Sans

Gill Sans — это шрифт без засечек с четкими чистыми линиями, которые придают ему современный вид. Он не идеален для текста абзаца прямо из коробки из-за отсутствия контраста между буквами и небольшого интервала. Но, как вы можете видеть в тексте примера, заголовок выглядит великолепно.Большинство устройств под управлением iOS, macOS и Windows поддерживают его.

18. Goudy Old Style

Пример шрифта Goudy Old Style

Goudy Old Style — это мягкий шрифт с засечками в старом стиле с сильными засечками и старомодным внешним видом. Точки имеют ромбовидную форму, а не правильные круглые круги в большинстве шрифтов с засечками. Он входит в состав большинства новых версий Windows.

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

Хотите узнать, как мы увеличили наш трафик более чем на 1000%?

Присоединяйтесь к 20 000+ другим пользователям, которые получают нашу еженедельную рассылку с инсайдерскими советами по WordPress!

Подпишитесь сейчас

19. Helvetica

Документальный фильм о шрифте Helvetica (Источник: Kanopy)

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

Вместо мягкого, округлого и теплого дизайна он сбалансирован и сосредоточен на чистых линиях и формах. Это делает его одним из немногих шрифтов, подходящих как для основного текста, так и для заголовков. Все устройства Apple включают шрифты Helvetica, в то время как Microsoft по умолчанию использует Arial, его эквивалент для MS.

20. Удар

Пример шрифта Impact

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

Он был частью исходных основных шрифтов для веб-пакета в 1998 году. Он до сих пор широко включен и поддерживается компьютерами и телефонами Apple и Windows.

21. Люцида Брайт

Пример шрифта Lucida Bright

Lucida Bright — это шрифт с засечками в линейке шрифтов Lucida от Microsoft, разработанный для MS в 1991 году. Одна из вещей, которая выделяет его, — это использование более квадратных и прочных засечек, например, на заглавных буквах «T» и «L». ». Он включен по умолчанию в большинство новых версий Windows, тогда как macOS обычно включает только шрифт без засечек Lucida Grande, что делает Georgia логическим запасным шрифтом.

22. Люцида Санс

Пример шрифта Lucida Sans

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

23. Microsoft Sans Serif

Пример шрифта Microsoft Sans Serif

Microsoft Sans Serif — это шрифт без засечек, впервые представленный в Windows 2000. Он является преемником шрифта MS Sans Serif, который также был известен как Helv (сокращение от Helvetica). Он вдохновлен и основан на Helvetica, ведущем шрифте без засечек в наше время.

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

24. Оптима

Пример шрифта Optima

Optima — это гуманный шрифт без засечек, с разной толщиной обводки и разной симметрией. Это заставляет его выглядеть почти сделанным вручную, что борется с типичным массовым производством шрифтов без засечек.Это один из стандартных шрифтов Apple без засечек, поддерживаемый большинством устройств iOS и macOS. Эквивалент Microsoft — Segoe.

25. Палатино

Пример шрифта Palatino

Palatino — это еще один шрифт с засечками в старом стиле, который будет хорошо смотреться в любой онлайн-газете или журнале. Но он менее однороден, чем что-то вроде Georgia или Times New Roman, с разной толщиной и формой обводки.

Дизайнерский подход помогает смягчить резкие буквы, такие как k, l, x, y и z. Он также немного жирнее, чем другие шрифты с засечками. Эти два фактора делают его немного теплее. Palatino входит в состав большинства устройств Windows и Apple.

26. Perpetua

Пример шрифта Perpetua

Perpetua — это шрифт с засечками уникального дизайна, первоначально созданный английским скульптором Эриком Гиллом.Существует резкий контраст в толщине штриха, например, посмотрите на строчную букву «е» или цифру «3». Это придает шрифту творческое, почти игровое качество. Обычно это шрифт Windows, но Баскервиль, его близкий родственник, является стандартным для большинства устройств Apple.

27. Роквелл

Пример шрифта Rockwell

Rockwell — квадратный шрифт или шрифт с засечками с очень жирным шрифтом, почти моновесом.Он подходит для заголовков или призывов к действию, но добавленная толщина шрифта не подходит для основного текста. Он включен в большинство новых версий MS Windows.

28. Segoe UI

Пример шрифта Segoe UI

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

Это современный шрифт с симметричными буквами и небольшим изменением толщины штриха. Шрифт не входит в комплект поставки компьютеров Apple, но эквивалент Helvetica Neue похож по внешнему виду.

29. Тахома

Пример шрифта Tahoma

Tahoma — еще один шрифт без засечек, разработанный Microsoft. Он имеет немного более жирные буквы, чем пользовательский интерфейс Segoe, и использует квадратные точки для своих строчных букв, точек и других знаков.

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

30. Требушет MS

Пример шрифта Trebuchet MS

Trebuchet MS — еще один шрифт без засечек, разработанный Microsoft. Это был один из оригинальных шрифтов, включенных в основные шрифты веб-пакета Microsoft.Он по-прежнему поддерживается практически всеми устройствами Microsoft и Apple. Буквы тоньше, чем у многих других шрифтов без засечек, что позволяет использовать их для абзацев и основного текста.

31. Вердана

Пример шрифта Verdana

Verdana, чистый шрифт без засечек, является еще одним основным продуктом Microsoft, который существует с 1996 года. Толщина штриха довольно мала для шрифта без засечек, что приводит к тонким, легко читаемым буквам.Вы можете без проблем использовать его как для текста абзаца, так и для заголовков. Он поддерживается практически всеми устройствами Apple и Windows.

Курсивные шрифты, безопасные для Интернета

Если вы хотите использовать курсивный веб-шрифт, у вас не так много вариантов выбора. В частности:

Сценарий Segoe
Ярость
Скрипт MT
Snell Roundhand
Рукописный ввод Люцида

Нет курсивных шрифтов, которые повсеместно поддерживаются на устройствах Apple и Microsoft.Вы должны учитывать, что использование курсивного шрифта для основного текста может быть не очень хорошей идеей, поскольку удобочитаемость является огромной частью удобства использования веб-сайта.

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

Шрифты Web Safe Sans Serif

Sans по-французски означает «без засечек», поэтому sans serif по сути означает «без засечек».Засечки — это линия или штрих, добавленный к более длинному штриху в письме. Например, маленькие вертикальные линии под верхним штрихом в заглавной букве «Т», часто встречающиеся в заголовках газет или журналов. Шрифты без засечек являются наиболее распространенными и популярными в Интернете, поэтому у вас есть много вариантов на выбор:

Arial
Калибри
Чандара
Готика века
Консола
Dejavu Sans
Франклин Готический
Гилл Санс
Helvetica
Lucida Sans
MS без засечек
Neue Helvetica
Оптима
Segoe UI
Тахома
Требушет MS
Вердана

Где скачать безопасные веб-шрифты?

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

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

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

Если у вас есть сайт WordPress с последней темой Twenty Twenty, вы можете редактировать шрифты HTML, добавляя собственный CSS в настройщик WordPress.

Откройте его, щелкнув в меню ссылку Внешний вид> Настроить, а затем развернув дополнительную вкладку CSS.

Настройщик WordPress — дополнительный CSS

Затем вам нужно использовать Chrome Dev Tools (или аналогичный инструмент для другого браузера), чтобы определить селекторы текста, который вы хотите изменить.

Например, вы можете проверить заголовок своего сообщения в блоге:

Chrome Dev Tools — проверьте

Мы видим, что в теме используется стандартный селектор «entry-title» для заголовка.Вы также можете выполнить поиск по атрибуту «font-family», чтобы узнать, как тема стилизует текст и на каком уровне.

Поскольку Twenty Twenty не использует определенный шрифт для заголовков, вы можете легко изменить шрифт заголовка, выбрав селектор «font-family».

Например, если мы хотим изменить заголовок на шрифт Impact, мы можем использовать следующий код:

  h2.entry-title {font-family: Impact, Charcoal, «Helvetica Inserat», «Bitstream Vera Sans Bold», «Arial Black», без засечек; }

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

WP Customizer — Новый шрифт заголовка

Мы рассмотрим это и многое другое в нашем руководстве по изменению шрифтов в WordPress. Если вы создали свой веб-сайт с использованием HTML и CSS, вы можете редактировать шрифт прямо в исходном коде.

Например, если вы используете тег стиля в документах HTML для применения кода CSS к каждой странице, вы можете отредактировать атрибут font-family там.

Семейство шрифтов селектора CSS основного текста

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

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

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

Пример таблицы стилей CSS

Обычно это делается вверху. В противном случае вы можете выполнить поиск по запросу «font-family», используя любой редактор кода.

Знаете ли вы, что переход на безопасные веб-шрифты может ускорить работу вашего сайта? 🚀 И что 70% потребителей говорят, что скорость загрузки страниц влияет на их решения о покупке? 😱 Две веские причины проверить этот список из 30+ веб-шрифтов ⬇️Нажмите, чтобы твитнуть

Сводка

Как и в случае с темами и плагинами, у вас нет недостатка в вариантах, когда дело доходит до идей шрифтов.

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

Идеальные шрифты выделят ваш бренд, улучшат читаемость и поддержат ваше сообщение. Выбирай с умом!

Экономьте время, деньги и повышайте производительность сайта с помощью:

Мгновенная помощь от экспертов по хостингу WordPress, 24/7.
Интеграция Cloudflare Enterprise.
Глобальный охват аудитории с 28 центрами обработки данных по всему миру.
Оптимизация с помощью нашего встроенного мониторинга производительности приложений.

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

Тег | изменить размер, шрифт и цвет текста

Путь // www.yourhtmlsource.com → Текст → ТЕГ <ШРИФТА>

Шрифт Тег был введен в начале существования HTML, чтобы позволить дизайнерам изменять размер, шрифт и цвет текста.Это принесло больше вреда, чем пользы — по разным причинам — но главным образом потому, что это чрезвычайно неэффективный способ форматирования текста. Форматирование текста CSS намного лучше, но знание этих старых приемов все еще полезно.

Навигация по страницам:
Размер шрифта
| Шрифт Face
· Ограничения шрифтов
· Общие шрифты
| Цвет шрифта

Последнее обновление страницы: 21.08.2012

Часы будущего:

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

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

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

Дополнительная литература:

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

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

У вас есть два варианта установки размера текста: размер абсолютно или относительно . Абсолютные размеры находятся в диапазоне от 1 до 7 и задаются следующим образом:

size = "2"> текст

В большинстве браузеров размер шрифта по умолчанию установлен как 3 .На большинстве сайтов размер текста будет примерно 2 или 3 .

Относительный размер означает, что размер текста будет изменяться относительно пользовательского размера по умолчанию . Это лучше, потому что он адаптируется к предпочтениям ваших пользователей — если они специально настроили свои браузеры для отображения текста большего размера, чем обычно, ваш текст будет увеличиваться пропорционально. У вас есть диапазон от +6 до +1 и от -1 до -6 . Плюс 1 и минус 1 вы будете использовать чаще всего.В качестве ярлыков для этих двух размеров используются теги и , которые помогают.

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

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

Лицевая сторона шрифта

Во-первых, если вы вообще не вносите изменений, ваш текст, вероятно, будет выглядеть так:

12pt Black Times New Roman

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

Загляните в папку шрифтов (на ПК это C: \ windows \ fonts ).У вас должно быть несколько десятков разных шрифтов. Некоторые из них подходят для использования в Интернете, а другие вы будете использовать снова и снова. Один из наиболее распространенных шрифтов, используемых в сети, — это Arial (вариант Helvetica для Mac). Чтобы изменить текст на Arial или любой другой шрифт, используйте теги

face = "Arial"> Ваш текст здесь.

Атрибут face был назван так, потому что дизайн шрифтов более точно известен как шрифтов .

Ограничения шрифтов

Определенное начертание шрифта будет отображаться на экране компьютера читателя только в том случае, если на его компьютере установлен этот шрифт. Так что, если у вас есть вся ваша страница, определенная шрифтом Digital (»скачать) или чем-то еще, многие ваши зрители просто получат страницу со скучным старым Times New Roman. Чтобы обойти это, лучше всего, конечно, использовать стандартные шрифты . Есть набор общих шрифтов, которые, вы можете быть более или менее уверены, появятся во всех системах ваших читателей.Атрибут face позволяет указать список шрифтов за раз. Хорошей практикой является указание резервных шрифтов на случай, если что-то пойдет не так. Наручные часы:

текст

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

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

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

sourcetip: , если у вас есть текстовый процессор, например Word, попробуйте использовать в нем пару шрифтов. Намного быстрее найти то, что вам нужно.

Общие шрифты

Для вашего удобства вот группа наиболее популярных и распространенных списков шрифтов:

Arial, Helvetica, без засечек
Trebuchet MS, Arial, Helvetica, без засечек
Verdana, Женева, без засечек
Times New Roman, Times, с засечками
Грузия, Гарамонд, Палатино, засечка
Courier New, Courier, моноширинный

Цвет шрифта

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

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

color = "# ff0000"> текст

Цвета в HTML должны быть определены как HEX-коды, которые представляют собой 6-значные коды, представляющие количество красного, зеленого и синего (RGB) в цвете. Чтобы увидеть полную таблицу этих кодов и выбрать те, которые вам нравятся, см. Таблицу цветов HEX.

текст

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

Typography — Material-UI

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

Семейство шрифтов

Вы можете изменить семейство шрифтов с помощью темы .typography.fontFamily свойство.

Например, в этой демонстрации используется системный шрифт вместо шрифта Roboto по умолчанию:

  const theme = createTheme ({
  типография: {
    семейство шрифтов: [
      '-Apple-system',
      'BlinkMacSystemFont',
      '"Segoe UI"',
      "Робото",
      '"Helvetica Neue"',
      "Ариал",
      'без засечек',
      '"Apple Color Emoji"',
      '"Segoe UI Emoji"',
      '"Символ пользовательского интерфейса Segoe"',
    ].присоединиться(','),
  },
});

Самостоятельные шрифты

Для самостоятельного размещения шрифтов загрузите файлы шрифтов в форматах ttf , woff и / или woff2 и импортируйте их в свой код.

⚠️ Для этого требуется, чтобы в процессе сборки у вас был плагин или загрузчик, который может обрабатывать загрузку ttf , woff и
woff2 файлов. В комплект будут встроены шрифты , а не . Они будут загружены с вашего веб-сервера вместо
CDN.

  импортировать RalewayWoff2 из './fonts/Raleway-Regular.woff2';

const raleway = {
  fontFamily: 'Raleway',
  fontStyle: 'нормальный',
  fontDisplay: 'swap',
  fontWeight: 400,
  src: `
    местный ('Raleway'),
    местный ('Raleway-Regular'),
    url ($ {RalewayWoff2}) формат ('woff2')
  `,
  unicodeRange:
    'U + 0000-00FF, U + 0131, U + 0152-0153, U + 02BB-02BC, U + 02C6, U + 02DA, U + 02DC, U + 2000-206F, U + 2074, U + 20AC, U +2122, U + 2191, U + 2193, U + 2212, U + 2215, U + FEFF ',
};

Затем вам нужно изменить тему, чтобы использовать этот новый шрифт.Чтобы глобально определить Raleway как начертание шрифта, можно использовать компонент CssBaseline (или любое другое решение CSS по вашему выбору).

  const theme = createTheme ({
  типография: {
    fontFamily: 'Raleway, Arial',
  },
  отменяет: {
    MuiCssBaseline: {
      '@Глобальный': {
        '@ font-face': [raleway],
      },
    },
  },
});


возвращение (
  
    
    {дети}
  
);

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

Material-UI использует rem единиц для размера шрифта.Размер шрифта по умолчанию для элемента в браузере составляет 16 пикселей , но у браузеров есть возможность изменить это значение,
Таким образом, блоки rem позволяют нам адаптировать настройки пользователя, что обеспечивает лучшую поддержку специальных возможностей.
Пользователи меняют настройки размера шрифта по разным причинам, от плохого зрения до выбора оптимальных настроек.
для устройств, которые могут сильно отличаться по размеру и расстоянию просмотра.

Чтобы изменить размер шрифта Material-UI, вы можете предоставить свойство fontSize .Значение по умолчанию — 14 пикселей .

  const theme = createTheme ({
  типография: {
    
    
    fontSize: 12,
  },
});

Размер шрифта, вычисленный браузером, следует этому математическому уравнению:

Размеры адаптивного шрифта

Свойства вариантов оформления отображаются непосредственно в сгенерированный CSS.
Внутри них можно использовать медиа-запросы:

  const theme = createTheme ();

theme.typography.h4 = {
  fontSize: '1.2ремь,
  '@media (min-width: 600px)': {
    fontSize: '1.5rem',
  },
  [theme.breakpoints.up ('md')]: {
    fontSize: '2.4rem',
  },
};

Чтобы автоматизировать эту настройку, вы можете использовать помощник responsiveFontSizes () , чтобы сделать размеры шрифта Typography в теме адаптивными.

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

  импортировать {createTheme, responsiveFontSizes} из '@ material-ui / core / styles';

пусть тема = createTheme ();
тема = responseiveFontSizes (тема);

Fluid font sizes

Выполняется: # 15251.

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

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

⚠️ Изменение размера шрифта может повредить доступность ♿️. Большинство браузеров согласились с размером по умолчанию 16 пикселей, но пользователь может его изменить. Например, человек с ослабленным зрением мог установить в браузере размер шрифта по умолчанию большего размера.

Свойство темы htmlFontSize предоставляется для этого варианта использования,
который сообщает Material-UI, каков размер шрифта в элементе .Это используется для настройки значения rem , чтобы рассчитанный размер шрифта всегда соответствовал спецификации.

  const theme = createTheme ({
  типография: {
    
    htmlFontSize: 10,
  },
});

  html {
  размер шрифта: 62,5%;
}

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

Варианты

Типографский объект по умолчанию имеет 13 вариантов:

h2
h3
ч4
h5
h5
h6
субтитры 1
субтитры 2
кузов1
кузов2
кнопка
подпись
наверху

Каждый из этих вариантов можно настроить индивидуально:

  const theme = createTheme ({
  типография: {
    subtitle1: {
      fontSize: 12,
    },
    body1: {
      fontWeight: 500,
    },
    кнопка: {
      fontStyle: 'курсив',
    },
  },
});

Значения по умолчанию

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

Хтмл шрифты: Как сделать красивый шрифт в html: размеры, цвета, теги шрифтов html

CSS: Стандартные (безопасные) шрифты

Шрифты с засечками — serif

Это заголовок

Это заголовок

Это заголовок

Шрифты без засечек — Sans-Serif

Это заголовок

Это заголовок

Это заголовок

Это заголовок

Это заголовок

Это заголовок

Это заголовок

Это заголовок

Моноширинные шрифты — Monospace

Это заголовок

Это заголовок

CSS: Изменение шрифта

Разница между семействами шрифтов Sans-serif и Serif

Семейства шрифтов в CSS

Образцы русифицированных шрифтов. Безопасные шрифты. Примеры русифицированных шрифтов.

Распространенные

Примеры русифицированных шрифтов

Установка шрифта | WebReference

Автор и редакторы

УЧЕБНИК HTML для новичков — Шрифты

Шрифты

HTML-письма — как правильно подключить шрифты

seodon.ru | Учебник HTML — Как изменить шрифт?

Изменение стилей шрифтов

Тег <SPAN> или что делать, когда нет нужных тегов

Меняем имя (гарнитуру) шрифта

Меняем размер шрифта

Размер шрифта заголовка составляет 120% от размера в BODY.

Еще немного об атрибуте style

CSS безопасных веб-шрифтов

Лучшие безопасные веб-шрифты для HTML и CSS

Arial (без засечек)

Verdana (без засечек)

Helvetica (без засечек)

Тахома (без засечек)

Trebuchet MS (без засечек)

Times New Roman (с засечками)

Грузия (с засечками)

Гарамонд (с засечками)

Courier New (моноширинный)

Brush Script MT (курсив)

CSS Веб-безопасные шрифты

Что такое безопасные веб-шрифты?

Резервные шрифты

Пример

Лучшие безопасные веб-шрифты для HTML и CSS

Arial (без засечек)

Verdana (без засечек)

Helvetica (без засечек)

Тахома (без засечек)

Trebuchet MS (без засечек)

Times New Roman (с засечками)

Грузия (с засечками)

Гарамонд (с засечками)

Courier New (моноширинный)

Brush Script MT (курсив)

Полный список безопасных для Интернета шрифтов HTML и CSS

Что такое веб-шрифты?

Какие бывают типы веб-шрифтов?

Нужны ли еще веб-безопасные шрифты?

1. Ваш HTML-текст останется неизменным.

2. Перед тем, как по умолчанию использовать предпочтительный веб-шрифт, в браузере будет несколько параметров.

3. У вас будет несколько резервных копий, если вы используете собственный шрифт.

Стеки шрифтов

Нужно ли мне загружать веб-шрифты, чтобы использовать их в стеке шрифтов?

Веб-безопасные шрифты

1.Arial (без засечек)

2. Arial Black (без засечек)

3. Verdana (без засечек)

4. Тахома (без засечек)

5. Trebuchet MS (без засечек)

6. Impact (без засечек)

7. Times New Roman (с засечками)