Как сделать шрифт times new roman html

font-family

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

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

Синтаксис

font-family: имя шрифта [, имя шрифта[, . ]] | inherit

Значения

Любое количество имен шрифтов разделенных запятыми. Универсальные семейства шрифтов:

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

HTML5 CSS2.1 IE Cr Op Sa Fx

     h1 < font-family: Geneva, Arial, Helvetica, sans-serif; >p 
Duis te feugifacilisi
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства font-family

Объектная модель

[window.]document.getElementById(» elementID «).style.fontFamily

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Веб-заметки и Веб-подсказки

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

2 комментария на «CSS: Как установить шрифт «Times New Roman»»

Вот так надо:
«Times New Roman», Times, serif; Сначало берем «Times New Roman», который нам и нужен
Если его нет, то любой из таймсов — Times
Если и таких нет, то любой шрифт с засечками — serif ПС.
sans-serif — это семейство шрифтов без засечек, как Arial
Georgia и Times очень отличаются.

High Star

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

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

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

Arial «> Шрифт Arial

Arial black «> Шрифт Arial black

Arial Narrow «> Шрифт Arial Narrow

Book Antiqua «> Шрифт Book Antiqua

Bookman Old Style «> Шрифт Bookman Old Style

Comic Sans MS «> Шрифт Comic Sans MS

Courier «> Шрифт Courier

Courier new «> Шрифт Courier new

Century Gothic «> Шрифт Century Gothic

Garamond «> Шрифт Garamond

Georgia «> Шрифт Georgia

Impact «> Шрифт Impact

Lucida Console «> Шрифт Lucida Console

Lucida Sans Unicode «> Шрифт Lucida Sans Unicode

Microsoft Sans Serif «> Шрифт Microsoft Sans Serif

Helvetica «> Шрифт Helvetica

Tahoma «> Шрифт Tahoma

Times New Roman «> Шрифт Times New Roman

Verdana «> Шрифт 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.

Шрифты HTML — свойства и способы изменения

Что это такое? Шрифты в HTML-документе – то, что меняют во время верстки. Изменению подвергают размер, цвет и гарнитуру. Также можно выбрать готовый шрифт, в каждой ОС свой список доступных вариантов.

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

В статье рассказывается:

1. Что может делать HTML со шрифтами
2. Свойства шрифтов в HTML
3. Таблицы шрифтов в HTML
4. Русскоязычные шрифты и их поддержка
5. Как изменить шрифт в HTML
6. Как изменить размер шрифта в HTML
7. Изменение гарнитуры шрифта в HTML
8. Часто задаваемые вопросы о шрифтах в HTML

Пройди тест и узнай, какая сфера тебе подходит:
айти, дизайн или маркетинг.
Бесплатно от Geekbrains

Что может делать HTML со шрифтами

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

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

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

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

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

Свойства шрифтов в HTML

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

На сегодняшний день этот подход безнадёжно устарел и считается плохой практикой, поскольку, согласно веб-стандартам, HTML-разметка не должна содержать ничего, что касается оформления, а лишь структуру и контент. Кроме того, полноценная поддержка тега font осталась только в HTML3 – довольно старой версии языка гипертекстовой разметки.

Узнай, какие ИТ — профессии
входят в ТОП-30 с доходом
от 210 000 ₽/мес
Павел Симонов
Исполнительный директор Geekbrains

Команда GeekBrains совместно с международными специалистами по развитию карьеры подготовили материалы, которые помогут вам начать путь к профессии мечты.

Подборка содержит только самые востребованные и высокооплачиваемые специальности и направления в IT-сфере. 86% наших учеников с помощью данных материалов определились с карьерной целью на ближайшее будущее!

Скачивайте и используйте уже сегодня:

Павел Симонов
Исполнительный директор Geekbrains

Топ-30 самых востребованных и высокооплачиваемых профессий 2023

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

Подборка 50+ бесплатных нейросетей для упрощения работы и увеличения заработка

Только проверенные нейросети с доступом из России и свободным использованием

ТОП-100 площадок для поиска работы от GeekBrains

Список проверенных ресурсов реальных вакансий с доходом от 210 000 ₽

Получить подборку бесплатно
Уже скачали 23672

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

Font-style

От него зависит тип начертания шрифта на странице. У него есть три значения:

• normal (стандартное начертание);
• Italic (курсивное);
• oblique (наклонное).

При последнем буквы будут слегка наклонены вправо, но их рисунок не изменится (как у курсива).

Font-variant

Описывает интерпретацию строчных и прописных букв в тексте. Принимает одно из двух значений:

• normal – стандартное поведение;
• small-caps – преобразование всех букв в заглавные и некоторое уменьшение их размера (относительно обычного состояния).

Font-weight

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

• normal для обычного начертания;
• bold – чтобы сделатьшрифт на HTML-странице жирным;
• bolder – ещё жирнее;
• lighter – меньшая жирность по сравнению с обычным состоянием.

Как видите, ничего сложного. Можно задать те же значения числами в диапазоне от 100 (самого светлого) до 900 (максимально жирного). Normal соответствует 300-400 (смотря какая гарнитура), а привычный полужирный bold — 500-700.

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

Font-size

Позволяет изменить размер шрифта в HTML-документе. Величину букв можно указывать как в абсолютных единицах (пунктах, пикселях), так и в относительных (процентах, em, rem). Как правило, разработчики задают её в пикселях и em, иногда в процентах.

Font-family

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

• serif – шрифты с засечками;
• sans-serif – шрифты без засечек (ими удобнее всего набирать основной текст);
• monospace – моноширинные шрифты (где все буквы равны по ширине);
• cursive – курсивные шрифты;
• fantasy –оригинальные и необычные.

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

Таблицы шрифтов в HTML

HTML-шрифты для ОС Windows

В Microsoft Windows — на компьютере с любой версией ОС — вы найдёте следующие шрифты для HTML (это стандартный список):

Название	Название	Название
Andale Mono	Arial	Arial Bold
Arial Italic	Arial Bold Italic	Arial Black
Comic Sans MS	Comic Sans MS Bold	Courier New
Courier New Bold	Courier New Italic	Courier New Bold Italic
Georgia	Georgia Bold	Georgia Italic
Georgia Bold Italic	Impact	Lucida Console
Lucida Sans Unicode	Marlett	Minion Web
Symbol	Times New Roman	Times New Roman Bold
Times New Roman Italic	Times New Roman Bold Italic	Tahoma
Trebuchet MS	Trebuchet MS Bold	Trebuchet MS Italic
Trebuchet MS Bold Italic	Verdana	Verdana Bold
Verdana Italic	Verdana Bold Italic	Webdings

Для вас подарок! В свободном доступе до 05.11 —>
Скачайте ТОП-10
бесплатных нейросетей
для программирования
Помогут писать код быстрее на 25%
Чтобы получить подарок, заполните информацию в открывшемся окне

HTML-шрифты в UNIX-системах

Машины, работающие под UNIX и аналогичными операционными системами, поддерживают другие HTML-шрифты:

Название	Название	Название
Charter	Clean	Courier
Fixed	Helvetica	Lucida
Lucida bright	Lucida Typewriter	New Century Schoolbook
Symbol	Terminal	Times
Utopia

HTML-шрифтыв Mac OS

На гаджетах Apple c MacOS, начиная с седьмой версии, по умолчанию установлены такие HTML-шрифты, как:

Название	Название	Название
American Typewriter	Andale Mono	Apple Chancery
Arial	Arial Black	Brush Script
Baskerville	Big Caslon	Comic Sans MS
Copperplate	Courier New	Gill Sans
Futura	Herculanum	Impact
Lucida Grande	Marker Felt	Optima
Trebuchet MS	Verdana	Webdings
Palatino	Symbol	Times
Osaka	Papyrus	Times New Roman
Textile	Zapf Dingbats	Zapfino
Techno	Hoefler Text	Skia
Hoefler Text Ornaments	Capitals	Charcoal

Русскоязычные шрифты и их поддержка

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

• Arial Black;
• Arial;
• Comic Sans MS;
• Courier New;
• Georgia;
• Lucida Console;
• Lucida Sans Unicode;
• Palatino Linotype;
• Tahoma;
• Times New Roman;
• Trebuchet MS.

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

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

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

Итак, рассмотрим, как поменять параметры шрифта в HTML: цвет, кегль, начертание. У этого тега есть несколько атрибутов:

• color: для цвета;
• face: для подключения шрифта к HTML-странице (именно он нас и интересует);
• size: для размера.

Только до 2.11
Скачай подборку материалов, чтобы гарантированно найти работу в IT за 14 дней
Список документов:

ТОП-100 площадок для поиска работы от GeekBrains

20 профессий 2023 года, с доходом от 150 000 рублей

Чек-лист «Как успешно пройти собеседование»

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

С цветами всё просто. Надеемся, вы ещё не забыли, как задавать цвета в HTML-коде.

А вот с выбором шрифта всё обстоит интереснее. Можно, например, фрагмент текста набрать определённым шрифтом:

Тут мы установили гарнитуру Arial.

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

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

Этот текст будет набран шрифтом MyFont, если он есть на устройстве пользователя

MyFont идёт первым в списке, однако браузеру он незнаком. В подобных случаях браузер смотрит на следующий по списку шрифт и, если он есть, выводит его. Для нашего примера это Verdana (если браузер его знает) или, в крайнем случае, Arial.

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

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

В этом нам тоже поможет тег font, а точнее, его атрибут size. Размер текста задаётся целым числовым значением в диапазоне от единицы до семи. К примеру, можно сделать шрифт на HTML-странице третьего размера.

Размер может быть абсолютным и относительным.

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

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

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

Третий размер шрифта

Увеличиваем размер шрифта до пяти (3 + 2 = 5)

Теперь размер шрифта — 5

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

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