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

2.6. CSS-шрифты

Шрифт в CSS — это ресурс, содержащий визуальное представление символов. На самом простом уровне он содержит информацию, которая сопоставляет коды символов с фигурами (называемые глифами), представляющие эти символы.

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

Ресурсы шрифтов могут быть установлены локально на устройстве, в котором работает браузер. Для локальных ресурсов шрифта описательная информация может быть получена непосредственно из ресурса шрифта (например, из файла arial.ttf ). Для загружаемых ресурсов шрифтов, также называемых веб-шрифтами, описательная информация включена со ссылкой на ресурс шрифта (например, для шрифта Poiret One).

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

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

Базовые свойства CSS-шрифтов

  • Содержание:

1. Семейство шрифтов: свойство font-family

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

Если в названии шрифта имеются пробелы или символы (например, #, $, %), то оно заключается в кавычки. Это делается для того, чтобы браузер мог понять, где начинается и заканчивается название шрифта.

font-family
Значения:
family-name Название (имя) семейства шрифтов, например, Times , Courier , Arial . Рекомендуется указывать вместе с базовым семейством.
generic-family Базовое семейство. CSS определяет пять базовых семейств шрифтов:
Шрифты с засечками — Serif (Times New Roman, Times, Garamond, Georgia)
Рубленые шрифты — Sans-serif (Helvetica, Geneva, Arial, Verdana, Trebuchet, Univers)
Моноширинные шрифты — Monospace (Courier, Courier New, Andele Mono)
Рукописные шрифты — Cursive (Comic Sans, Gabriola, Monotype Corsiva, Author, Zapf Chancery)
Аллегорические шрифты (Western, Woodblock, Klingon)
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

2. Насыщенность шрифта: свойство font-weight

Свойство font-weight задаёт насыщенность шрифта.

font-weight
Значения:
normal Значение по умолчанию, устанавливает нормальную насыщенность шрифта. Эквивалентно значению насыщенности, равной 400.
bold Делает шрифт текста полужирным. Эквивалентно значению насыщенности, равной 700.
bolder Насыщенность шрифта будет больше, чем у предка.
lighter Насыщенность шрифта будет меньше, чем у предка.
100, 200, 300, 400, 500, 600, 700, 800, 900 Значение 100 соответствует самому легкому варианту начертания шрифта, а 900 — самому плотному. При этом, эти числа не определяют конкретной плотности, т.е. 100, 200, 300 и 400 могут соответствовать одному и тому же варианту слабой насыщенности начертания шрифта; 500 и 600 — средней насыщенности, а 700, 800 и 900 могут выводить одинаковое очень насыщенное начертание. Распределение плотности так же зависит от количества уровней насыщенности, определенных в конкретном семействе шрифтов.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Рис. 1. Свойство font-weight

3. Ширина шрифта: свойство font-stretch

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

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

font-stretch
Значения:
ultra-condensed Указывает на наиболее сжатый шрифт.
extra-condensed Указывает на второй по сжатости шрифт.
condensed Указывает на сжатый шрифт.
semi-condensed Указывает на немного сжатый шрифт.
normal Значение по умолчанию.
semi-expanded Слегка расширенный шрифт.
expanded Расширенный шрифт.
extra-expanded Второй по расширенности шрифт.
ultra-expanded Максимально расширенный шрифт.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

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

Рис. 2. Свойство font-stretch

4. Начертание шрифта: свойство font-style

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

font-style
Значения:
normal Значение по умолчанию, устанавливает для текста обычное начертание шрифта.
italic Выделяет текст курсивом.
oblique Устанавливает наклонное начертание шрифта.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Рис. 3. Свойство font-style

5. Размер шрифта: свойство font-size

Свойство font-size указывает желаемую высоту глифов из шрифта.

font-size
Значения:
absolute-size xx-small , x-small , small , medium , large , x-large , xx-large . В качестве стандартного размера принимается medium . В CSS1 предложенный коэффициент масштабирования между соседними индексами составлял 1.5, что для пользователя оказалось слишком большим. В CSS2 предложенный коэффициент масштабирования для экрана компьютера между смежными индексами составлял 1.2, что все еще создавало проблемы для небольших размеров. Новый коэффициент масштабирования варьируется между каждым индексом, чтобы обеспечить лучшую читаемость.
relative-size smaller , larger . Относительные размеры обусловливают изменение размера шрифта элемента относительно родителя. При этом размер шрифта может выйти за рамки размеров, предполагаемых для xx-small и xx-large .
длина Размер шрифта устанавливается с помощью положительных значений единиц длины, например, px , em , как целых, так и дробных.
% Относительное значение, вычисляется на основании любого размера, унаследованного от родительского элемента. Обеспечивает более точную настройку вычисляемого размера шрифта. Задание размеров шрифта с помощью em эквивалентно процентному значению.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.
Значения absolute-size
xx-small x-small small medium large x-large xx-large
Коэффициент масштабирования
3/5 3/4 8/9 1 6/5 3/2 2/1 3/1
HTML заголовки
h6 h5 h4 h3 h2 h1
HTML размер шрифта
1 2 3 4 5 6 7

6. Относительный размер шрифта: свойство font-size-adjust

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

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

Свойство font-size-adjust — способ сохранить читабельность текста при использовании резервных шрифтов. Это достигается путем настройки размера шрифта таким образом, чтобы x-height была одинаковой независимо от используемого шрифта.

Рис. 4. Термины в типографике

font-size-adjust
Значения:
none Не сохраняет x-height шрифта.
число Задает значение аспекта, используемое в приведенных ниже расчетах для расчета скорректированного размера шрифта:
c = (a / a ‘) s
где:
s = значение размера шрифта
a = значение аспекта, указанное в свойстве font-size-adjust
a ‘ = значение аспекта фактического шрифта
c = скорректированный размер шрифта для использования
Отрицательные значения недействительны.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Как отображается текст в каждом из этих сравниваемых шрифтов, показано ниже, столбцы показывают текст, отображаемый в Verdana, Futura и Times. Одно и то же значение размера шрифта используется для ячеек в каждой строке, и для отображения различий по x-height включены красные линии. В верхней половине каждая строка отображается в том же значении размера шрифта. То же самое верно и для нижней половины, но в этой половине также устанавливается свойство font-size-adjust , чтобы фактический размер шрифта регулировался таким образом, чтобы сохранить x-height для каждой строки. Обратите внимание, что небольшой текст остается относительно разборчивым в каждой строке в нижней половине.

Рис. 5. Текст с использованием и без использования font-size-adjust

7. Сокращенная запись свойств шрифта: свойство font

Свойство font за исключением описанного ниже, является сокращенным свойством для установки font-style , font-variant , font-weight , font-stretch , font-size/line-height , font-family . Также могут быть включены значения для свойства font-variant , которые поддерживаются CSS 2.1 — normal или small-caps .

Все подсвойства свойства font сначала сбрасываются на свои начальные значения, включая перечисленные выше, плюс font-size-adjust , font-kerning , все подсвойства font-variant и настройки шрифтов, за исключением font-synthesis . Затем этим свойствам присваиваются те значения, которые указаны в свойстве font . Для свойства font-size-adjust невозможно установить значение, отличное от его начального значения, поэтому следует использовать вместо этого индивидуальное свойство. Если явное значение какого-либо свойства не нужно, то оно опускается.

Следующие значения относятся к системным шрифтам:
caption — шрифт, используемый для элементов управления с субтитрами (например, кнопок, раскрывающихся списков и т.д.).
icon — шрифт, используемый для обозначения значков.
menu — шрифт, используемый в меню (например, раскрывающиеся меню и списки меню).
message-box — шрифт, используемый в диалоговых окнах.
small-caption — шрифт, используемый для маркировки подписи элементов управления.
status-bar — шрифт, используемый в строке состояния окна.

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

8. Управление синтезом шрифтов: свойство font-synthesis

Свойство font-synthesis определяет, разрешено ли пользовательским агентам (браузерам) синтезировать полужирное или наклонное начертание шрифтов, когда они отсутствуют в семействе шрифтов. Если weight не указан, пользовательские агенты не должны синтезировать полужирное начертание, а если style не указан, пользовательские агенты не должны синтезировать курсив.

Как изменить шрифт ВКонтакте

Как изменить шрифт ВКонтакте

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

Указанное дополнение одинаково работает практически во всех современных веб-браузерах, однако мы в качестве примера затронем исключительно Google Chrome.

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

Устанавливаем Stylish

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

    Используя приведенную ссылку, перейдите на главную страницу магазина дополнений для веб-браузера Google Chrome.

Переход на главную страницу магазина дополнений для интернет обозревателя Google Chrome

Поиск расширения Stylish в интернет магазине через интернет обозреватель Google Chrome

Для упрощения поиска не забудьте установить точку напротив пункта «Расширения».

Установка расширения Stylish в интернет магазине через интернет обозреватель Google Chrome

Подтверждение установки расширения Stylish в интернет магазине через интернет обозреватель Google Chrome

Главная страница расширения Stylish в интернет обозревателе Google Chrome

Рекомендуем ознакомиться с видеообзором этого дополнения на главной странице.

Возможность авторизации в расширении Stylish в интернет обозревателе Google Chrome

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

На этом процесс установки и подготовки дополнения заканчивается.

Используем готовые стили оформления

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

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

    Откройте главную страницу расширения Stylish.

Переход на главную страницу расширения Stylish через интернет обозреватель Google Chrome

Переход к разделу Vk на главной странице расширения Stylish через интернет обозреватель Google Chrome

Поиск темы оформления для Vk на странице расширения Stylish через интернет обозреватель Google Chrome

Использование кнопки Install Style на странице расширения Stylish через интернет обозреватель Google Chrome

Не забудьте подтвердить установку!

Деактивация темы оформления в расширении Stylish через интернет обозреватель Google Chrome

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

Работаем с редактором Stylish

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

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

Переход к настройкам расширения Stylish на главной странице на сайте ВКонтакте

Переход к дополнительному меню настроек расширения Stylish в интернет обозревателе Google Chrome

Переход к редактору стилей оформления в расширении Stylish через интернет обозреватель Google Chrome

Теперь, когда вы оказались на странице со специальным редактором кода расширения Stylish, можно приступать к процессу изменения шрифта ВКонтакте.

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

Ввод начального кода в редактор Stylish при изменении шрифта на сайте ВКонтакте

Данный код подразумевает то, что текст будет изменен в рамках всего сайта ВКонтакте.

Создание табуляции для основного кода в редакторе Stylish при изменении шрифта на сайте ВКонтакте

Использование кода font family в редакторе Stylish при изменении шрифта на сайте ВКонтакте

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

Использование кода font size в редакторе Stylish при изменении шрифта на сайте ВКонтакте

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

Использование кода font style в редакторе Stylish при изменении шрифта на сайте ВКонтакте

В данном случае значение может быть одно из трех:

  • normal – обычный шрифт;
  • italic – курсив;
  • oblique – наклонный.

Использование кода font weight в редакторе Stylish при изменении шрифта на сайте ВКонтакте

Указанный код принимает следующие значения:

  • 100-900 – степень жирности;
  • Bold – полужирный текст.

Использование кода color в редакторе Stylish при изменении шрифта на сайте ВКонтакте

Здесь могут быть указаны любые существующие цвета с помощью текстового названия, RGBA- и HEX-кода.

body, div, span, a

Изменение цвета шрифта для дополнительных тегов в редакторе Stylish при изменении шрифта на сайте ВКонтакте

Рекомендуем воспользоваться нашим кодом, так как он захватывает все текстовые блоки на сайте ВК.

Сохранение оформления для ВК в редакторе Stylish при изменении шрифта на сайте ВКонтакте

Обязательно установите галочку «Включено»!

Дополнительное редактирование кода оформления в редакторе Stylish при изменении шрифта на сайте ВКонтакте

Успешно измененный шрифт на главной странице на сайте ВКонтакте

Использование кнопки завершить в редакторе Stylish при создании стиля для сайта ВКонтакте

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

ЗакрытьМы рады, что смогли помочь Вам в решении проблемы.

Помимо этой статьи, на сайте еще 12476 инструкций.
Добавьте сайт Lumpics.ru в закладки (CTRL+D) и мы точно еще пригодимся вам.

Отблагодарите автора, поделитесь статьей в социальных сетях.

ЗакрытьОпишите, что у вас не получилось. Наши специалисты постараются ответить максимально быстро.

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

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

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

Как изменить шрифт на WordPress в шаблоне

В большинстве современных шаблонов (тем оформления) изменения шрифтов делается довольно просто — из настроек самого шаблона в админке Вордпресса.

В каждой теме эти настройки могут быть расположены по своему, но основных путей несколько:

1. Админка — Внешний вид — Настроить. Тут откроется менюшка, в которой можно произвести кастомизацию шаблона, исходя из его возможностей.

как настроить шрифт в шаблоне вордпресс

шрифты в вордпресс

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

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

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

Как правило находятся настройки почти там же, Админка — Внешний вид- Theme options (или название шаблона). Либо может быть нужная опция просто в админке добавится с названием шаблона.

настройка шаблона вордпресс

Внутри также ищите необходимые настройки шрифтов.

Это были относительно простые способы. Далее мы рассмотрим варианты, когда в самой теме оформления ВП нет необходимых настроек для шрифтов.

Как поменять цвет шрифта в Вордпресс через CSS

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

Для того что бы поменять цвет шрифта существует CSS правило color. Выглядит это примерно так в коде:

  • В данном примере p это селектор параграфов, т.е. мы меняем цвет для всего текста заключенного в тэг параграфа p.
  • color соответственно это атрибут, который мы хотим поменять у параграфа, который означает цвет
  • #af7070 это всего лишь шестнадцатеричный код цвета в RGB, соответствующий коричневому оттенку.

Хорошая новость — вам вовсе не обязательно учить все правила и коды цветов, достаточно иметь современный браузер и воспользоваться инструментом просмотра кода (CTRL+Shift+I для хрома)

изменение цвета шрифта через css

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

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

Например вы поменяли цвет шрифта параграфов на черный, выглядеть это будет теперь так

Копируем данный код и сохраняем по следующему адресу: Админка — Внешний вид — Настроить — Дополнительные стили

Там откроется окошко, в котором вы можете сохранять все ваши собственные стили, без риска потери изменений при обновлении шаблона.

сохрарения кода шрифта в вордпресс

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

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

По аналогии с изменением цвета, все тоже самое, только вместо атрибута color для указания размера текста используется атрибут
font-size. Несколько правил записываются вместе, с новой строки через; Выглядит это будет так вместе с цветом и размером:

Где 17px это указание размера шрифта в пикселях. Можете подобрать оптимальные для себя значения изменяя эту цифру.

Как изменить семейство шрифта на ВП

Но что делать если изначально шрифт на сайте вам не нравится и вы хотите другой? Тут все сложнее.

Браузеры по умолчанию поддерживают не так много шрифтов, их вы можете увидеть в таблице ниже:

стандартные шрифты браузеров

За семейство шрифтов отвечает CSS правило font-family и выглядит полностью оно так в нашем примере:

Где font-family это атрибут семейства, а перечисления Arial, Helvetica, Sans-Serif через запятую это указания шрифтов и типа шрифтов.

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

Если же вы хотите установить нестандартный шрифт на сайт, то придется поколдовать немножко) Проще всего будет использовать плагины, типа WP Google Fonts.

Либо можно зайти на сайт того же гугла https://fonts.google.com/ и подобрать там что-то интересное, а затем следуя несложной инструкции подключить данный шрифт на свой сайт.

добавление гугл шрифта на сайт

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

А какой у вас любимый шрифт для сайта? Мои например это PT Sans, Tahoma и Verdana

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

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