Как поменять шрифт текста в css
Перейти к содержимому

Как поменять шрифт текста в css

  • автор:

Как изменить шрифт с помощью css

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

Шрифты

Шрифты

Здесь дважды написан один и тот же текст. Но если верхнюю часть хочется прочитать, то текст внизу сливается в одно серое пятно.

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

Давайте их и разберем.

Стиль шрифта font-style

Определяет начертание шрифта:

обычное — normal;
курсивное — italic;
наклонное — oblique.

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

Курсивное выделение текста

Размер шрифта font-size

Размер шрифта можно задавать как в абсолютных величинах, скажем 20pt, так и в относительных с помощью процентов. Но так делают редко. Чаще всего используют задание размера шрифта с помощью зарезервированных слов.

Для фиксированного размера:

xx-small — очень очень маленький,
x-small — очень маленький,
small — маленький,
medium — средний,
large — большой,
x-large — очень большой,
xx-large — очень очень большой.

Для относительного размера:

larger — больше чем размер шрифта родительского элемента,
smaller — меньше чем размер шрифта родительского элемента.

Жирность шрифта font-weight

Свойство font-weight — определяет жирность шрифта. Насыщенность шрифта может быть задана с помощью зарезервированных слов:

normal — обычный шрифт,
bold — полужирный шрифт,
bolder — жирный шрифт,
lighter — тонкий шрифт.

Кроме этого жирность можно задавать числами в интервале от 100 до 900 с шагом 100.

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

Свойство font-family — указывает одно, два или три имени шрифта из библиотеки шрифтов.

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

Так например запись вида

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

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

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

serif — шрифты с засечками
sans-serif — рубленые шрифты
cursive — курсивные шрифты
fantasy — декоративные шрифты
monospace — моношириные шрифты

Например, если в файле написать

то это означает, что если вдруг не окажется шрифта с именем Times New Roman, то следует использовать любой (или определённый в настройках браузера) доступный шрифт из семейства sans-serif — рубленых шрифтов.

Преобразование букв в заглавные-уменьшенные

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

normal — нормальный (по умолчанию)
small-caps — все буквы заглавные и уменьшенные

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

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

Наш зоголовок

Ох, как длинно! Вы, наверное, заметили, что все свойства начинаются одинаково, со слова font.

Оказывается, оно является базовым атрибутом. И мы можем все эти свойства записать в следующем виде:

Как задать шрифт, изменить размер или цвет текста отдельного участка.

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

Но на самом деле я подразумевал вот так:

Т.е. в дальнейшем вы должны понимать что все теги которые я демонстрирую вы должны вставлять в основной ХТМЛ-шаблон между тегами и

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

Теперь вернемся к нашей теме.

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

Начнем по порядку, и научимся изменять цвет текста отдельного участка, для этой цели в тег FONT нужно поместить атрибут COLOR вот так:

color="red"> отдельный кусок текста

Значения атрибута color такие-же как и для атрибутов bgcolor text тега body, т.е мы можем их задавать словами по английски(Black, Green, Silver, Lime, Gray, Olive, White, Yellow, Maroon, Navy, Red, Blue, Purple, Teal, Fuchsia, Aqua)или номерами цвета в RGB (#000000- #FFFFFF)

Далее мы с вами научимся задавать шрифты для текста и познакомимся с новым атрибутом FACE тега FONT,

face="Tahoma"> отдельный кусок текста
  • Arial
  • Cosmic Sans
  • Courier
  • Garamond
  • Helvetica
  • Verdana
  • Tahoma
  • Times
  • Times New Roman
face="Tahoma, Times, Verdana"> отдельный кусок текста

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

А теперь перейдем к размерам, изменить размер текста в HTML можно при помощи двух тегов font и/или BASEFONT.
Начнем с BASEFONT, этот тег служит для изменения базового цвета, шрифта и размера текста, на пример:
. текст.
Этот тег не является контейнером, т.е. обратного тега не имеет. Цвет и шрифт текста задается как в теге FONT, а вот для изменения размера текста используется атрибут SIZE с значением от 1 до 7. Этот тег в тексте можно использовать несколько раз: size=»4″
>. текст.
size=»6″>. текст.
size=»3″>. текст.
По умолчанию размер текста = «3», этот размер можно не задавать. В первом примере мы весть текст увеличили на единицу, во второй линии мы его увиличили до «6», а в третей мы опять его вернули к тексту по умолчанию.
Теперь хочу вас круто огорчить, этот тег был введен в версии HTML-4.01, и соответственно поддерживается в браузере только Интернет Експлорер, остальные браузеры его просто игнорируют, Так что лучше этот тег не использовать вообще.
А пользоваться только тегом FONT с атрибутом SIZE он поддерживается почти всеми браузерами. Атрибут SIZE, так же принимает значения от 1 до 7, но эти размеры могут задаваться и от «-2» до «+4»
текст
текст
текст
текст
текст
текст
текст
Тег FONT как и BASEFONT может содержать несколько атрибутов:
size=»5″ color=»red» fase=»Tahoma, Times, Verdana»>. текст.

Общий форум

Какой размер и стиль шрифта лучше использовать при создании лекции с помощью соответствующего элемента? Заранее благодарен.

Сумма оценок: —
В ответ на Дмитрий Стрилко

Re: Шрифт

от Александр Козлов — пятница, 24 июля 2015, 03:36

если кротоко — тот который включен по умолчанию.

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

Сумма оценок: 1 (1)
Постоянная ссылка Показать сообщение-родителя Ответить
В ответ на Александр Козлов

Re: Шрифт

от Дмитрий Стрилко — пятница, 24 июля 2015, 03:48

Спасибо за ответ. Тот шрифт, что включен по умолчанию, выглядит на семнадцатидюймовом мониторе (разрешение 1280*1024) очень мелко. Стандартный размер шрифта для сайтов (судя по информации, которую я нашел) 12 — 14. Но и этот размер шрифта для moodle почему то мелкий. Кокой размер и стиль шрифта используете именно Вы?

Сумма оценок: —
Постоянная ссылка Показать сообщение-родителя Ответить
В ответ на Дмитрий Стрилко

Re: Шрифт

от Людмила Татарникова — пятница, 24 июля 2015, 10:41

Считается, что на веб-страницах лучше использовать рубленый шрифт (без засечек) — он действительно менее капризный при отображении. Вот этот текст выводится шрифтом Open sans 14 px — вполне читаемый на мониторе 1920х1080. Можно использовать Arial, Helvetica (более компактный по горизонтали), Trebuchet MS и подобные. Хотя, на мой взгляд, та же Georgia на веб-страницах иногда бывает очень в тему.

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

Конкретно на нашем учебном сайте основной шрифт Trebuchet MS, в меню — Ubuntu Condenced (из гугловской коллекции), размер не задан (стандартный), отображается размером примерно 14px — никто из студентов или преподавателей не жаловался и желания изменить шрифт в редакторе у преподавателей не возникало.

Кстати, обращайте внимание на единицы измерения в найденных Вами советах: 12-14 px или pt?

Сумма оценок: 2 (1)
Постоянная ссылка Показать сообщение-родителя Ответить
В ответ на Людмила Татарникова

Re: Шрифт

от Дмитрий Стрилко — пятница, 24 июля 2015, 14:07

Спасибо за содержательный ответ. Не все шрифты есть в наличии в списке редактора HTML TinyMCE. Например, нету Helvetica. Как загружать новые шрифты не знаю, поскольку опыт использование moodle пока небольшой (4 месяца). Размер шрифта у меня лично 14 pt, а стиль — Times New Roman. Людмила, а как вы решаете проблему с междустрочным интервалом, абзацами, автоматическим переносом слов? В стандартных двух редакторах moodle 2.8. ( HTML TinyMCE; HTML Atto ) я вообще не вижу этих функций, которые есть в привычном нам Worde.

Сумма оценок: —
Постоянная ссылка Показать сообщение-родителя Ответить
В ответ на Дмитрий Стрилко

Re: Шрифт

от Людмила Татарникова — суббота, 25 июля 2015, 00:19

По адресу / Администрирование/ Плагины/ Текстовые редакторы/ Редактор HTML TinyMCE/ Основные настройки Вы сможете настроить кнопки в редакторе и список шрифтов. Подобная страница настройки есть и для редактора Atto.

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

Настройте стили для контента (основной текст, заголовки, таблицы, списки) — и все ресурсы будут единообразные.

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

Ну а если уж нестандартное оформление всё же нужно, проще отформатировать текст в Word и копированием вставить в редактор — вордовское форматирование сохранится.

Если по стилям есть вопросы — с удовольствием отвечу.

VS Code: каким шрифтом отображается текст?

Вообще в текстовом редакторе «VS Code» есть параметры для указания имени (семейства) шрифта и размера шрифта, которым отображается текст.

Но эти параметры работают примерно так же, как и при указании шрифтов в стилях CSS для HTML-элементов HTML-страниц. Это потому, что редактор «VS Code» создан с помощью фреймворка «Electron». Приложения (программы) для настольного компьютера, созданные с помощью этого фреймворка, используют для отображения текста движок «Chromium». Это тот самый движок, на базе которого созданы браузеры «Google Chrome», «Microsoft Edge», «Яндекс.Браузер» и многие другие. То есть это то самое «использование веб-технологий» о котором заявляли создатели редактора «VS Code» в статье «Зачем мы создали редактор Visual Studio Code?».

Таким образом, можно сказать, что текст в редакторе «VS Code» отображается примерно так же, как текст HTML-страниц в вышеупомянутых браузерах. Только в браузерах этот текст мы обычно читаем, а в редакторе «VS Code» мы его и читаем, и редактируем.

Что это значит на практике? Получается, мы можем указать для текста в редакторе «VS Code» CSS-свойства «font-family» и «font-size». Это можно сделать с помощью параметров « editor.fontFamily » и « editor.fontSize ». Напомню, параметры можно открыть с помощью пункта главного меню «Файл – Настройки – Параметры».

По умолчанию в моем экземпляре редактора значения этих параметров следующие:

Имя (семейство) шрифта: « Consolas, ‘Courier New’, monospace ».
Размер шрифта (в пикселях): « 14 ».

Если с размером шрифта всё понятно, то что означает запись в параметре «Имя (семейство) шрифта»? Люди, которые работают со стилями CSS, знакомы с такой записью. Она значит, что для отображения текста редактор сначала попытается применить шрифт (семейство шрифтов) «Consolas». В случае отсутствия этого шрифта на компьютере пользователя редактор попытается применить для отображения текста шрифт (семейство шрифтов) «Courier New». В записи название «Courier New» указано в кавычках-апострофах, это требуется из-за пробела в названии шрифта (семейства шрифтов).

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

Проверка на практике

Проверим нашу теорию (изложена выше) об одинаковом отображении текста в редакторе «VS Code» и браузерах «Microsoft Edge» (на движке «Chromium») и «Google Chrome». Для этого я взял следующий код на языке JavaScript (из интерактивной среды редактора):

const cars = ["��", "��", "��"];

и поместил его в файл «test.js».

После этого я написал такой код на языке HTML:

 const cars = ["��", "��", "��"]; 

и поместил его на HTML-страницу «test.html» (должно быть очевидно, что тут указана только интересная для нашего опыта часть кода HTML-страницы).

Оба тестовых файла я записал в кодировке UTF-8.

Просмотрим файл «test.js» в редакторе «VS Code», а файл «test.html» в браузерах «Microsoft Edge» (на движке «Chromium») и «Google Chrome», вот картинка-иллюстрация:

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

Но не всё так просто. Ранее я уже разбирал, что когда браузер не находит в указанном в стиле CSS шрифте нужного глифа, то он берет для этого другой шрифт, в котором нужный глиф есть, несмотря на то, что шрифт с нужным глифом может даже не быть указанным в данном стиле CSS. В том случае, который я разбирал ранее, для отображения текста был указан шрифт «Times New Roman», а браузер для отображения одного из символов использовал шрифт «Cambria Math», потому что в шрифте «Times New Roman» не было подходящего глифа.

В нашем тестовом коде (указан выше) используются символы-эмодзи, изображающие автомобили. Я просмотрел все 3030 глифов шрифта «Consolas» и не нашел среди них глифов для этих символов. Напомню, коды этих символов в Юникоде — U+1F697 (automobile), U+1F699 (recreational vehicle), U+1F695 (taxi).

Что сделал браузер (а также и редактор «VS Code», ведь мы выяснили, что отображение символов в них работает одинаково) для отображения этих символов? Он взял нужные глифы из шрифта «Segoe UI Emoji», в котором они есть.

Выводы. В большинстве случаев редактор «VS Code» отображает текст шрифтом, указанным в его параметрах. В соответствующем параметре редактора можно указать несколько шрифтов по принципу: сначала наиболее желаемый, потом менее желаемый. Редактор использует тот шрифт из указанных, который есть на компьютере пользователя. Шрифт указывается по тому же правилу, что и значение для CSS-свойства «font-family». В некоторых случаях, когда редактор не может найти нужного глифа для отображения символа в указанном в параметрах шрифте, то редактор подбирает тот шрифт из измеющихся на компьютере пользователя, в котором есть нужный глиф.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *