Как изменить шрифт на сайте: Как изменить шрифт на сайте: 2 рабочих способа

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

Возможный Дубликат : Можно ли установить шрифт для всего приложения? Мне нужно установить пользовательский шрифт (формат. ttf) для всего приложения, как я могу это сделать? Из манифеста или XML…

Мне интересно, могу ли я определить альтернативный шрифт для всего графика. … digraph script_concept { graph [layout=dot,fontname=helvetica]; . .. Согласно этому 1 старый пост характеристик шрифта,…

Есть ли способ изменить системный шрифт для всего приложения? Я хочу определить шрифт для всего приложения, чтобы мне не нужно было переходить к отдельным меткам или отдельным шрифтам, чтобы…

Мне нужно изменить формат номера для всего моего сайта, так как разные страны используют разные форматы, такие как Соединенные Штаты-$1,234,567.89 USD Канада — $1,234,567.89 CAD Великобритания -…

Возможные Дубликаты : Как установить шрифт по умолчанию для всех windows в приложении Win32? Какой шрифт используется по умолчанию для диалоговых элементов управления MFC? Я ненавижу шрифт окна…

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

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

У меня есть приложение wxPython (использующее 2.8), построенное с python 2.7. Есть ли способ изменить шрифт для всего приложения ? Я имею в виду, что я хотел бы изменить шрифт для любого…

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

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

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

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

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

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

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

<I>…</I> и <EM>…</EM> — выделяют текст курсивом.

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

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

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

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

Вы спросите: «Но неужели указанные выше теги — это все, чем можно выделить текст в HTML»? Ну конечно же нет! Существуют еще теги <S> и <STRIKE>, подчеркивающие текст, а также тег <U>, отображающий зачеркнутый текст. Но, видите ли, эти теги являются устаревшими в 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 немного освоите.

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

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

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

Пример использования тега 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, но и многие другие приложения, в том числе и браузеры. Имя (гарнитура) шрифта определяет сам его рисунок отличающий один шрифт от другого.

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

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

<тег>. ..</тег>

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

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

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

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

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

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

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

Как поменять шрифт и размер текста на сайте (Шаблон «Protostar»)

Стандартные font-family и font-size, предлагаемые авторами шаблонов не всегда удовлетворяют эстетические требования веб-мастера (даже без задатков дизайнера). В этой статье рассмотрим, как поменять шрифт и размер текста на сайте на примере стандартного шаблона «Protostar». Для этого нам придётся поменять пару строчек в css-файлах шаблона, что само по себе зло, так как при обновлении шаблона эти настройки наверняка слетят.

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

Внешний вид сайта и его преобразование

Вот так выглядела выдача материалов сайта по моих преобразований:

А вот так выглядит выдача после небольших правок всего лишь двух строчек в css-стиле сайта:

Лично мне второй вариант нравится больше. Кому тоже кажется, что пора что-то менять, можно читать дальше. =)

Вносим изменения в css-стиль шаблона сайта

Для тех, кто привык работать в админке Joomla 3, то подобные изменения можно произвести непосредственно в Панели управления в «Менеджере шаблонов». Чтобы освежить память, рекомендую прочитать статью «Изменение файлов шаблона сайта Joomla в админке». Для подсказки, привожу картинку, где видны основные действия внесения правок в css-файл шаблона сайта:

Что же и где было поменяно. Конкретика.

Нужно поменять всего лишь два параметра: сменить font-family и увеличить на единицу font-size в свойствах тега body в файле, находящемуся:

/templates/protostar/css/template.css

Это строчки №213 и №214.

Было:

body {
	margin: 0;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 13px;
	line-height: 18px;
	color: #333;
	background-color: #fff;
}

Стало:

body {
	margin: 0;
	font-family: Open Sans, sans-serif;
	font-size: 14px;
	line-height: 18px;
	color: #333;
	background-color: #fff;
}

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

Заберите ссылку на статью к себе, чтобы потом легко её найти 😉

Выберите, то, чем пользуетесь чаще всего:

Спасибо за внимание, оставайтесь на связи! Ниже ссылка на форум и обсуждение ; )

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

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

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

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

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

Чтобы изменить тип шрифта в HTML, используйте свойство CSS font-family. Установите для него желаемое значение и поместите его в атрибут стиля.Затем добавьте этот атрибут стиля к элементу HTML, например к абзацу, заголовку, кнопке или тегу диапазона.

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

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

  
  Ваш текст здесь. 
  

Однако этот тег шрифта устарел еще в 1998 году, поэтому он не работает с последней версией HTML, HTML5. На смену ему пришел гораздо более эффективный способ изменить внешний вид текста, а именно CSS. Форматирование текста CSS — это более легкая и гибкая альтернатива тегу шрифта HTML, и его несложно изучить.

Давайте перепишем приведенный выше пример, используя CSS, чтобы изменить тип шрифта абзаца. Важно отметить, что я использую CodePen, который использует шрифт Times New Roman в качестве шрифта по умолчанию.Я собираюсь добавить атрибут стиля к первому элементу абзаца, что означает, что стиль будет применен только к этому абзацу. Остальной абзац и заголовки на странице останутся в формате Times New Roman.

Вот HTML со встроенным CSS:

 
 
 
 
  
 Как изменить тип шрифта в HTML [встроенный CSS] 
  

 
 
 Это фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст.Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст.  Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. 
 
 
 

 
  
 Объяснение 
  

 
 
 Поскольку я использую редактор CodePen, шрифт по умолчанию - Times New Roman. Это означает, что изменение гарнитуры абзаца потребует от меня использования атрибута стиля, который содержит свойство CSS font-family, установленное на «Arial». Другие элементы на странице не предназначены для встроенного CSS и поэтому остаются Times New Roman.
 
 
 

  

Вот результат:

См. Pen oNBMjeB Кристины Перриконе (@hubspot) на CodePen.

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

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

Вот код CSS:

 
 
 
 
 п {
 
 семейство шрифтов: Arial; 
 
} 
 
 
  

Вот HTML:

 
 
 
 
  
 Как изменить тип шрифта в HTML [Внутренний CSS] 
  

 
 
 Это фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст.Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. 
 
 
 

 
  
 Объяснение 
  

 
 
 Поскольку я использую редактор CodePen, шрифт по умолчанию - Times New Roman. Это означает, что для изменения гарнитуры всех абзацев на странице мне потребуется использовать селектор типа CSS и установить для свойства CSS font-family значение «Arial. "Заголовки на странице останутся Times New Roman. 
 
 
 

  

Вот результат:

См. Pen GRrBpyQ Кристины Перриконе (@hubspot) на CodePen.

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

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

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

Чтобы продолжить переписывание первого примера, в котором использовался устаревший тег шрифта, давайте изменим размер шрифта абзаца на 20 пикселей с помощью CSS. В этом примере я все еще собираюсь использовать CodePen, но загружу на страницу Bootstrap CSS. Это означает, что в дополнение к типу шрифта по умолчанию Helvetica размер шрифта по умолчанию для абзацев будет 16 пикселей, заголовок 2 — 32 пикселя, а заголовок 3 — 28 пикселей.

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

Вот HTML со встроенным CSS:

 
 
 
 
  
 Как изменить размер шрифта в HTML [встроенный CSS] 
  

 
 
 Это фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст.Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. 
 
 
 

 
  
 Объяснение 
  

 
 
 Я использую редактор CodePen, но загружаю BootstrapCDN, поэтому размер шрифта по умолчанию для текста и абзацев составляет 16 пикселей, h3s - 32px, а h4s - 28px.  Шрифт по умолчанию - также Helvetica. Это означает, что изменение размера первого абзаца потребует от меня использования атрибута стиля, который содержит свойство CSS font-size, установленное на «20 пикселей."Другие элементы на странице не нацелены на встроенный CSS и поэтому сохраняют свои размеры по умолчанию. 
 
 
 

 
 
  

Вот результат:

См. Ручка «Как изменить размер шрифта в HTML [встроенный CSS]» Кристины Перриконе (@hubspot) на CodePen.

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

Вот код CSS:

 
 
 
 
 п {
 
 размер шрифта: 20 пикселей; 
 
} 
 
 
  

Вот HTML:

 
 
 
 
  
 Как изменить размер шрифта в HTML [внутренний CSS] 
  

 
 
 Это фиктивный текст.  Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст.Это больше фиктивный текст. 
 
 
 

 
  
 Объяснение 
  

 
 
 Я использую редактор CodePen, но загружаю BootstrapCDN, поэтому размер шрифта по умолчанию для текста и абзацев составляет 16 пикселей, h3s - 32px, а h4s - 28px. Шрифт по умолчанию также Arial. Это означает, что изменение размера всех абзацев на странице потребует от меня использования селектора типа CSS и установки свойства CSS font-size на «20 пикселей». Заголовки на странице будут иметь размер по умолчанию.
 
 
 


  

Вот результат:

См. Ручка «Как изменить размер шрифта в HTML [внутренний CSS]» Кристины Перриконе (@hubspot) на CodePen.

Изменить размер шрифта в том же абзаце

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

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

Вот HTML со встроенным CSS:

 
 
 
 
  
 Как изменить размер шрифта в том же абзаце [встроенный CSS] 
  

 
 
 Это фиктивный текст. Это больше фиктивный текст.  Это более крупный текст.  Это более фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст.
 
 
 

 
 
 
  
 Объяснение 
  

 
 
 Я использую редактор CodePen, но загружаю BootstrapCDN, поэтому размер шрифта по умолчанию для абзацев составляет 16 пикселей. Чтобы изменить размер шрифта текста в абзаце, я заключу текст в теги span. Затем я добавлю атрибут стиля, который содержит свойство CSS font-size, для которого задано значение, отличное от 16 пикселей. В этом примере он установлен на 22 пикселя. 
 
 
 

 
 
  

Вот результат:

См. Ручка «Как изменить размер шрифта в том же абзаце» [встроенный CSS], автор: Кристина Перриконе (@hubspot) на CodePen.

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

Вот код CSS:

 
 
 
 
 # больше {
 
 размер шрифта: 18 пикселей; 
 
} 
 
 # меньше {
 
 размер шрифта: 14 пикселей; 
 
} 
 
 
  

Вот HTML:

 
 
 
 
  
 Как изменить размер шрифта в том же абзаце [внутренний CSS] 
  

 
 
 Это фиктивный текст.Это больше фиктивный текст.  Это меньший текст.  Это более фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. 
 
 
 

 
 
 
  
 Объяснение 
  

 
 
 Я использую редактор CodePen, но загружаю BootstrapCDN, поэтому размер шрифта по умолчанию для абзацев составляет 16 пикселей. Чтобы изменить размер шрифта абзаца и текста внутри абзаца, я заключу текст в теги span и добавлю атрибуты ID как к абзацу, так и к элементу span.Затем я воспользуюсь селекторами идентификаторов и установлю для них разные размеры шрифта в разделе заголовка страницы. 
 
 
 

 
 
  

Вот результат:

См. «Перо для изменения размера шрифта в том же абзаце» [внутренний CSS] от Кристины Перриконе (@hubspot) на CodePen.

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

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

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

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

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

Вот HTML со встроенным CSS:

 
 
 
 
  
 Как изменить цвет шрифта в HTML [встроенный CSS] 
  

 
 
 Это фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст.Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. 
 
 
 

 
  
 Объяснение 
  

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

 
 
  

Вот результат:

См. Ручка «Как изменить цвет шрифта в HTML» [встроенный CSS] Кристины Перриконе (@hubspot) на CodePen.

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

Вот код CSS:

 
 
 
 
 п {
 
 цвет: # FF7A59; 
 
} 
  

Вот HTML:

 
 
 
 
  
 Как изменить цвет шрифта в HTML [Внутренний CSS] 
  

 
 
 Это фиктивный текст.Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. 
 
 
 

 
  
 Объяснение 
  

 
 
 Поскольку я использую редактор CodePen Editor, по умолчанию используется черный цвет шрифта. Это означает, что изменение цвета всех абзацев на странице потребует от меня использования селектора типа CSS и установки свойства цвета CSS на шестнадцатеричный код цвета для оранжевого (# FF7A59).Заголовки на странице останутся черными. 
 
 
 

 
 
  

Вот результат:

См. Ручка «Как изменить цвет шрифта в HTML» [внутренний CSS], автор — Кристина Перриконе (@hubspot) на CodePen.

Чтобы узнать, как изменить цвет фона текста, прочтите статью «Как изменить цвет текста и фона в CSS».

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

Изменение шрифта в div ничем не отличается от изменения шрифта в элементе абзаца или диапазона.

«Div» в HTML — это просто элемент, который может разделить вашу веб-страницу на разделы, чтобы вы могли настроить таргетинг на них с помощью уникальных свойств CSS.

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

Вот код CSS:

 
 
 
 
 #example {
 
 семейство шрифтов: Arial; 
 
 размер шрифта: 20 пикселей; 
 
 цвет: # FF7A59; 
 
} 
 
 
  

Вот HTML:

 
 
 
 
  
 Как изменить шрифт в Div в HTML [Внутренний CSS] 
  

 
 
 
 
 Это фиктивный текст.Это больше фиктивный текст. Это текст меньшего размера, это скорее фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это скорее фиктивный текст. 
 

 
 
 
  
 Объяснение 
  

 
 
 Я использую редактор CodePen, поэтому тип, размер и цвет шрифта по умолчанию - Times New Roman, 16 пикселей и черный. Чтобы изменить все эти свойства раздела текста, я мог бы обернуть текст в div и добавить к элементу атрибут ID.Затем я могу использовать селектор идентификаторов и установить свойства font-family, font-size и font-color в разделе head страницы. 
 
 
 

 
 
  

Вот результат:

См. Pen How to Change Font in a Div in HTML [Internal CSS] Кристины Перриконе (@hubspot) на CodePen.

Изменение шрифта с помощью HTML и CSS

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

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

Изменение шрифтов и цветов, используемых веб-сайтами

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

Чтобы изменить шрифт:

1. В строке меню вверху экрана щелкните и выберите.Нажмите кнопку меню и выберите Параметры Настройки. Нажмите кнопку меню и выберите Настройки.

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

4. Закройте страницу about: Preferences . Любые сделанные вами изменения будут автоматически сохранены.

Пользовательские шрифты

Некоторые веб-сайты имеют собственные шрифты; чтобы отключить их:

1. В строке меню вверху экрана щелкните и выберите.Нажмите кнопку меню и выберите Параметры Настройки. Нажмите кнопку меню и выберите Настройки.

2. На панели перейдите к Язык и внешний вид .
3. В разделе Шрифты и цвета нажмите кнопку Дополнительно….

4. В открывшемся диалоговом окне «Шрифты» снимите флажок Разрешить страницам выбирать собственные шрифты вместо выбранных выше.

5. Щелкните OK, чтобы закрыть окно «Шрифты».
6. Закройте страницу about: preferences . Любые сделанные вами изменения будут автоматически сохранены.

Другие настройки шрифтов

1. В раскрывающемся списке « шрифтов для » диалогового окна «Шрифты» выберите языковую группу / скрипт.
   • Например, чтобы установить шрифты по умолчанию для западноевропейских языков / сценариев (латиница), выберите Latin . Для языка / сценария, которого нет в списке, выберите Другие системы письма .
2. Выберите, должен ли пропорциональный текст быть с засечками (например, «Times New Roman») или без засечек (например, «Arial»).Затем укажите размер шрифта для пропорционального текста.
3. Укажите шрифт, который будет использоваться для шрифтов с засечками, без засечек и моноширинных шрифтов. Вы также можете изменить размер Моноширинный шрифт .

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

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

Чтобы изменить цвет шрифта:

1. В строке меню вверху экрана щелкните и выберите. Нажмите кнопку меню и выберите Параметры Настройки. Нажмите кнопку меню и выберите Настройки.

2. На панели перейдите к Язык и внешний вид .
3. В разделе Шрифты и цвета нажмите кнопку Цвета….
4. Щелчок по любому из цветных прямоугольников покажет вам возможные цвета, из которых вы можете выбрать.Выберите нужный цвет, щелкнув один из цветных прямоугольников.

5. Щелкните OK, чтобы закрыть окно «Цвета».
6. Закройте страницу about: preferences . Любые сделанные вами изменения будут автоматически сохранены.

Пользовательский цвет шрифта

Некоторые веб-сайты имеют настраиваемые цвета шрифтов, чтобы их отключить:

1. В строке меню вверху экрана щелкните и выберите. Нажмите кнопку меню и выберите Параметры.Нажмите кнопку меню и выберите «Настройки».

2. На панели перейдите к Язык и внешний вид .
3. В разделе Шрифты и цвета нажмите кнопку Цвета….
4. В открывшемся окне установите Заменить цвета, указанные на странице, с моими значениями выше на.

5. Щелкните OK, чтобы закрыть окно «Цвета».
6. Закройте страницу about: preferences . Любые сделанные вами изменения будут автоматически сохранены.

Другие настройки для цветов

Текст и фон : Здесь вы можете изменить цвет текста и фона по умолчанию, которые будут использоваться на веб-страницах, на которых эта информация не указана. Щелкните образцы цветов, чтобы выбрать цвета.

• Использовать системные цвета : Установите этот флажок, чтобы использовать цвета, определенные в настройках вашей операционной системы, вместо цветов, указанных выше.

Цвета ссылок : Здесь вы можете изменить цвета по умолчанию для веб-ссылок.Щелкните образцы цветов, чтобы выбрать цвета.

• Подчеркнутые ссылки : По умолчанию ссылки на веб-страницах подчеркнуты. Снимите флажок с этого параметра, чтобы отключить его. Обратите внимание, что многие сайты определяют свои собственные правила стилизации, и эта настройка параметров не влияет на эти сайты.
• Замените цвета, указанные на странице, на ваш выбор выше :
  • Всегда : выберите этот параметр, чтобы заставить все сайты использовать цвета по умолчанию.
  • Только с темами с высокой контрастностью : эта настройка заставит Firefox использовать цвета, указанные автором веб-страницы, за исключением случаев, когда вы используете тему WindowsLinux с высокой контрастностью.
  • Никогда : выберите этот параметр, чтобы Firefox использовал цвета, указанные автором веб-страницы.

1. Введите about: config в адресную строку и нажмите EnterReturn.
   Может появиться страница с предупреждением. Нажмите Принять риск и продолжить, чтобы перейти на страницу about: config.
2. Введите браузер * цвет в поле поиска.
3. Щелчок правой кнопкой мыши Удерживайте нажатой клавишу Ctrl при щелчке на измененных настройках (выделены жирным шрифтом).
4. Выбрать Сбросить .

1. Введите about: config в адресную строку и нажмите EnterReturn.
   Может появиться страница с предупреждением. Нажмите Принять риск и продолжить, чтобы перейти на страницу about: config.
2. Введите браузер * цвет в поле поиска.
3. Нажмите кнопку Сбросить рядом с измененными настройками (выделены полужирным шрифтом).

Firefox также включает Zoom. Это позволяет увеличить размер текста на любой веб-странице. Инструкции см. В разделе Размер шрифта и масштаб — увеличение размера веб-страниц.

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

Обновлено: 02.06.2020 компанией Computer Hope

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

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

Использование CSS для одного приложения

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

Пример кода

 
 Этот текст имеет шрифт Courier, синий цвет и 20 пикселей. 
 

Результат

Этот текст имеет шрифт Courier, синий цвет и размер 20 пикселей.

Использование CSS для одной или нескольких страниц

Пользовательский шрифт для одной страницы

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

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

Пример

 
 Все это предложение - красный и Курьер 
 Только слово  test  красное и Courier. 
 

Результат

Вся эта фраза красная и курьерская.

Только слово тест красное и Курьер.

Пользовательский шрифт для многих страниц

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

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

 @charset «utf-8»; 
 .courier {
семейство шрифтов: Courier;
цвет: # 005CB9;
} 

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

  Пример специального шрифта.