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

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

  • автор:

Изменение шрифта и размера шрифта в HTML: input tag

Если требуется срочно изменить шрифт элемента input , следует применить к нему свойства CSS font-family и font-size :

Скопировать код

Теперь элемент оформлен с использованием шрифта Arial и размером 16px.

Обобщённое применение стилей: использование селекторов

Оставьте инлайновые стили в пользу CSS-селекторов:

Скопировать код

/* Селектор по ID */ #myStylishInput < font-family: 'Courier New', monospace; // Шарм печатной машинки всегда к месту font-size: 18px; >

Назначьте этот стиль в HTML:

Скопировать код

Управляйте стилями в целом, используя селекторы по типу атрибута для всех input :

Скопировать код

/* Селектор по атрибуту */ input[type=text] < font-family: 'Verdana', sans-serif; // Для современного и простого вида font-size: 14px; >

Используйте веб-шрифты

Благодаря возможностям CSS3 можно использовать веб-шрифты, например, с Google Fonts:

Скопировать код

Преобразуем обычные поля ввода:

Скопировать код

input < font-family: 'Poppins', sans-serif; // Жалко немного разнообразия в обойму шрифтов font-size: 16px; >

Адаптация и взаимодействие: отзывчивые и стили при наведении

Современный веб не мыслится без адаптивности. Используйте динамические единицы измерения для подстройки под различные размеры экранов:

Скопировать код

input < font-size: calc(1vmin + 10px); // Размер шрифта имеет значение >

Добавьте интерактивности с помощью стилей при наведении:

Скопировать код

input:hover < background-color: #f0f0f0; font-size: 22px; // Сюрприз! Шрифт увеличивается при наведении курсора >

Визуализация

Представьте, что мы «переодеваем» наш :

Скопировать код

Превращаем одежду нашего :

Скопировать код

Было: [��] Стало: [��]

Перед вами в шрифте Comic Sans размером 20px.

Принципы качественного дизайна и доступности

Хороший дизайн требует согласованности. Настраивая стили, не забывайте о доступности:

Скопировать код

input < font-size: larger; /* Упрощаем чтение для пользователей с ограничениями зрения */ >

Использование атрибутов aria-label помогает программам для чтения с экрана:

Скопировать код

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

Применение стилей в зависимости от контекста

Выбирайте стиль в соответствии с контекстом. Для коротких заметок подойдут меньшие шрифты:

Как задать один Font-family всем элементам на странице?

Я пытался написать body < font-family:'нужное'; >, но не работает. На htmlbook написано, что font-family наследуется. Но у меня что — то не получается.

Отслеживать
371 1 1 золотой знак 5 5 серебряных знаков 13 13 бронзовых знаков
задан 28 июн 2012 в 7:34
145 2 2 золотых знака 7 7 серебряных знаков 15 15 бронзовых знаков

Всё оказалось просто, в проекте был подключен reset.css, в нем для всех элементов было установлено font:inherit; я закомментировал эту строку и всё стало ок.

28 июн 2012 в 8:08

4 ответа 4

Сортировка: Сброс на вариант по умолчанию

html, body

А вообще должен работать и ваш вариант.

Отслеживать
ответ дан 28 июн 2012 в 7:36
invincible invincible
1,900 12 12 серебряных знаков 13 13 бронзовых знаков
Пробовал, не помогает
28 июн 2012 в 7:41

И так и так пробовал, сейчас даже отдельно элементу попробовал установить font-family,всё равно не работает. Но самое интересное, что есть у меня класс .logo, так вот если ему задать : font-family:»Comic Sans MS»; например, то он изменит шрифт элемента с .logo Comic Sans MS

28 июн 2012 в 7:52

Всё оказалось просто, в проекте был подключен reset.css, в нем для всех элементов было установлено font:inherit; я закомментировал эту строку и всё стало ок.

Это делать не следовало. Устанавливая для всех элементов значение «inherit» для свойства «font» вы сможете наследовать установленный шрифт. Процедура такая:

  1. Устанавливаем для всех элементов inherit
  2. Ниже для body задаем нужное значение

Причина, по которой не получалось установить наследуемый шрифт в вашем случае, заключается в разном «весе» значения «font» и «font-family». В данном случае есть 2 решения:

1) В reset.css вместо

2) Не трогаем reset.css, но тогда в «body» задаем параметры так же для «font».

body < font:normal 12/14px Arial,Helvetica,Garuda,sans-serif; >

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

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

Что то туплю сильно. Использую свойство css font-family. Какие то шрифты не пытался подключить, он не хочет менять шрифт. Что я не улавливаю?

@fontface < font-family: bn; src: url("fonts/BebasNeue.woff") format("woff"), url("fonts/BebasNeue.woff2") format("woff2"); >@fontface < font-family: "lobster"; src: url("fonts/lobster.woff") format("woff"); >@fontface < font-family: "os"; src: url("fonts/OpenSans.woff") format("woff"), url("fonts/OpenSans.woff2") format("woff2"); >body < margin: 0; padding: 0; font-family: math; >#header .write < margin-left: 10%; margin-top: 1.5%; width: 15%; float: left; >.count < width: 10%; float: right; margin-right: 5%; margin-top: 1%; >.count p
   Верстка моего первого шаблона     
#

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

basket

Внешний вид текста

Сначала я пытался менять шрифты через селектор класса к P, потом пытался применить ко всему body а ничего не меняется. Только начал изучать вертску, ничего не понимаю. Пытался подключить и те шрифты что скачал и подключил через fontface а потом и стандартные а внешний вид текста не меняется.

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

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

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

В статье мы рассмотрели:

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

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

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

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

Настройки сайта → Шрифты и цвета.

Если представленные сочетания вам не подошли, нажмите «Расширенные настройки». Вы увидите все способы, как подключить шрифт к сайту на Тильде:

(По ссылкам подробные инструкции по каждому типу подключения).

Настройки сайта → Шрифты и цвета → Расширенные настройки.

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

Настройки сайта → Шрифты и цвета → Расширенные настройки → Размер, насыщенность и цвета.

Что такое насыщенность шрифта

Насыщенность (начертание, font weight) определяет толщину каждой буквы. Обычно мы привыкли называть текст нормальным (normal) и жирным (bold). У шрифтов могут быть также дополнительные варианты толщин — от очень тонких (super light) до очень жирных (super bold). Не все шрифты имеют все градации насыщенности, многие имеют только два начертания: нормальное и жирное. Для базового набора на Тильде поддерживаются 5 основных значений: light, normal, medium, semi-bold, bold. Но если загружать шрифт с помощью файла, можно добавить дополнительные начертания.

Семь вариантов насыщенности шрифта Avenir.

Каким должен быть размер шрифта на сайте

Размер зависит от количества текста. Если текста очень мало и он используется, по сути, только для подписей и комментариев, сделайте шрифт крупнее — 22px (по умолчанию в настройках 20px). Так он будет выглядеть более презентационно.
Если текста достаточно много, наоборот уменьшите шрифт до 18px, так он будет легче читаться.

Настройка параметров шрифта для разных типов проекта

Начнем с самого простого: какой у вас тип проекта? Это статья, пост в блоге, рассказ, в общем, что-то, где текст — это главное? Или у вас сайт, лендинг, фотоистория, — проект, в котором текста не так много? Назовем два типа проектов условно: статья и сайт.

Шрифт для сайта

(лендинг, многостраничный сайт, интернет-магазин)

Шрифт для статьи

(пост в блоге, лонгрид, рассказ, интервью)

Настройка шрифтов для сайта в зависимости от тональности

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

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

Полужирный заголовок и нормальный текст
Semi-Bold+Normal

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

Для каких сайтов подойдет: для любых.

В настройках сайта задайте следующие параметры:
Text font weight — Normal
Headline font weight — Semi-Bold

Настройки сайта → Шрифты и цвета → Размер и насыщенность.

Страница студии загара. В примере используется: Tilda Sans.

Жирный заголовок и нормальный текст
Bold+Normal

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

Для каких сайтов подойдет: бар, коворкинг, анонс концерта, спортивные соревнования, промостраница тура и т.д.

В настройках сайта задайте следующие параметры:
Text font weight — Normal
Headline font weight — Bold

Настройки сайта → Шрифты и цвета → Размер и насыщенность.

Страница курса живописи. В примере используется Arial.

Жирный заголовок и тонкий текст

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

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

В настройках сайта задайте следующие параметры:
Text font weight — Light
Headline font weight — Bold

Настройки сайта → Шрифты и цвета → Размер и насыщенность.

Страница проектов интерьерного бюро.

В примере используются: Montserrat для заголовков и Open Sans для текста.

Тонкий заголовок и тонкий текст
Light+Light

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

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

В настройках сайта задайте следующие параметры:
Text font weight — Light
Headline font weight — Light

Настройки сайта → Шрифты и цвета → Размер и насыщенность.

Страница сайта по уходу за растениями. В примере используется Futura.

Примеры сочетаний разных шрифтов

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

Страница сайта томатной фермы. В примере используются: Oswald для заголовков и Montserrat для текста.

Страница сайта дизайн-бюро. В примере используются: Kharkiv Tone для заголовков и Arial для текста.

Страница сайта с рецептами. В примере используются: Cormorant Garamond для заголовков и Inter для подзаголовков.

Страница сайта томатной фермы. В примере используются: Oswald для заголовков и Montserrat для текста.

Страница сайта дизайн-бюро. В примере используются: Kharkiv Tone для заголовков и Arial для текста.

Страница сайта с рецептами. В примере используются: Cormorant Garamond для заголовков и Inter для подзаголовков.

Как подобрать шрифт для статьи

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

Если у вас лонгрид или статья, в которой много текста, поставьте размер текста 18px. Но если у вас фотоотчет и текст — это в основном подписи к фотографиям, то размер можно оставить 20px или увеличить до 22px.

В настройках сайта задайте следующие параметры:
Text font weight — Normal
Headline font weight — Bold / Semi-Bold
Text font size — 18px

Настройки сайта → Шрифты и цвета → Размер и насыщенность.

Статья в блоге о ювелирной коллекции

Главная страница сайта бренда украшений.

В примере используются: Playfair Display для заголовков и Open Sans для надзаголовков.

Страница с информацией о новой коллекции украшений.

В примере используются: Playfair Display для цитат и Open Sans для текста.

Статья в корпоративном блоге

Обложка статьи в блоге. В примере используется Futura.

Текст статьи про Сантк-Петербург. В примере используется Futura.

Статья про Landing page

Обложка статьи про Landing page.

В примере используются: Druk Text Wide для заголовка и Tilda Sans для надзаголовка.

Текст статьи про Landing page.

В примере используются: Druk Text Wide для заголовков и Tilda Sans для текста.

С засечками или без?
Шрифт без засечек
Шрифт с засечками

Оранжевые частицы на изображении — это засечки. Цитата Массимо Винелли на картинке слева набрана шрифтом Helvetica Light, справа — Baskerville Regular.

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

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

Как подключить шрифт, которого нет в базовом наборе

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

Где купить шрифты или найти бесплатные

На Тильде можно подключить шрифт пятью способами:

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

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

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

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

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

Инструкция по загрузке своего файла шрифта на Тильде.

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

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