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

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

  • автор:

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

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

  • Вопрос задан более трёх лет назад
  • 363 просмотра

1 комментарий

Простой 1 комментарий

iiiBird

iBird Rose @iiiBird Куратор тега CSS

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

Типографика

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

Глобальные настройки

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

  • Используйте набор встроенных шрифтов, который выберет лучшее семейство шрифтов font-family для всех ОС и девайсов.
  • Для более широкой и доступной шкалы шрифтов BS4 использует шрифт браузера по умолчанию font-size (обычно 16px), так что юзеры могут сами настроить шрифты через настройки шрифтов браузера.
  • Используйте атрибуты $font-family-base , $font-size-base и $line-height-base как типографическую базу для .
  • Задавайте глобальные цвета ссылок через $link-color и применяйте подчеркивание ссылок только в :hover .
  • Используйте $body-bg для задания background-color для (по умолчанию стоит #fff ).

Эти стили находятся в _reboot.scss , а глобальные переменные определены в _variables.scss . Задавайте $font-size-base в rem .

Заголовки

Все HTML-заголовки ( — ) доступны в BS4.

 h1. Заголовок bootstrap h2. Заголовок bootstrap h3. Заголовок bootstrap h4. Заголовок bootstrap h5. Заголовок bootstrap h6. Заголовок bootstrap 

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

h1. Заголовок bootstrap

h2. Заголовок bootstrap

h3. Заголовок bootstrap

h4. Заголовок bootstrap

h5. Заголовок bootstrap

h6. Заголовок bootstrap

 class="h1">h1. Заголовок bootstrap  class="h2">h2. Заголовок bootstrap  class="h3">h3. Заголовок bootstrap  class="h4">h4. Заголовок bootstrap  class="h5">h5. Заголовок bootstrap  class="h6">h6. Заголовок bootstrap 

Настройка заголовков

Используйте имеющиеся общие классы для воссоздания маленького вторичного текста-подзаголовка из Bootstrap 3.

Заголовок отображения С выцветшим вторичным текстом

 Заголовок отображения  class="text-muted">С выцветшим вторичным текстом 

«Заголовок дисплея»

Традиционные заголовки созданы для «работы» «в глубине» вашей страницы. Если вам необходимо выделить заголовок, используйте «заголовок дисплея» — большего размера, слегка более вычурный.

Display 1
Display 2
Display 3
Display 4
 class="display-1">Display 1  class="display-2">Display 2  class="display-3">Display 3  class="display-4">Display 4 

«Лид»

Создайте выделяющийся, отстоящий от основной массы параграф добавлением класса .lead .

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

 class="lead"> Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. 

Блочные текстовые элементы

Стили для обычных блочных элементов HTML5.

Тэг-выделитель для подсветки текста.

Мелкий шрифт (типа нижний индекс).

Жирный текст.

 Тэг-выделитель для подсветки текста.  

Удаленный текст.

Зачеркнутый.

Строка - дополнение к документу.

Подчеркнутая

Мелкий шрифт (типа нижний индекс).

Жирный текст.

Курсив.

Классы .mark и .small дают стили, одинаковые с тэгами и , но помогают избежать нежелательных семантических последствий, которые могут возникнуть с тэгами.

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

Классы текстовых утилит

Изменяйте выравнивание текста, стиль, «жирность» и цвет с помощью текстовых утилит и утилит цвета.

Сокращения

Реализация элемента нужна для показа полной версии акронимов и сокращений по наведению. Этот тег имеет подчеркивание по умолчанию и показывает “help-cursor” для дополнительного контекста, а также для помощи юзерам-инвалидам.

Добавьте класс .initialism к сокращению для создания слегка уменьшенного шрифта.

title="attribute">attr

title="HyperText Markup Language" class="initialism">HTML

Цитаты

Для цитат с другого источника в вашем документе. Оберните любой элемент в для создания цитаты.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

 class="blockquote">  class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. 

Наименование источника

Добавьте для идентификации источника. Оберните имя источника в .

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Кто-то знаменитый в Название источника

 class="blockquote">  class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.  class="blockquote-footer">Кто-то знаменитый в  title="Название источника">Source Title  

Выравнивание

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Кто-то знаменитый в Название источника

 class="blockquote text-center">  class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.  class="blockquote-footer">Кто-то знаменитый в  title="Название источника">Название источника  

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Кто-то знаменитый в Название источника

 class="blockquote text-right">  class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.  class="blockquote-footer">Кто-то знаменитый в  title="Название источника">Название источника  

Списки

Без элементов стилизации

Удаляет свойство по умолчанию list-style и левый марджин элементов списка (только прямые «потомки»). Это работает лишь для прямых «потомков», т.е. вам необходимо будет добавлять класс для каждого из вложенных списков.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
     class="list-unstyled"> Lorem ipsum dolor sit amet Consectetur adipiscing elit Integer molestie lorem at massa Facilisis in pretium nisl aliquet Nulla volutpat aliquam velit  Phasellus iaculis neque Purus sodales ultricies Vestibulum laoreet porttitor sem Ac tristique libero volutpat at   Faucibus porta lacus fringilla vel Aenean sit amet erat nunc Eget porttitor lorem 

    Блочные

    Удаляет у элементов списка значок слева и создает небольшой отступ margin с помощью сочетания классов .list-inline и .list-inline-item .

    • Lorem ipsum
    • Phasellus iaculis
    • Nulla volutpat
     class="list-inline">  class="list-inline-item">Lorem ipsum  class="list-inline-item">Phasellus iaculis  class="list-inline-item">Nulla volutpat 

    Описание и выравнивание

    Выравнивайте термины и описания по горизонтали, используя предустановленные классы сеточной системы BS4 (или семантические миксины). Для более длинных терминов вы можете добавить класс .text-truncate чтобы «усечь» текст эллипсисом.

    Списки описания A description list is perfect for defining terms. Euismod

    Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

    Donec id elit non mi porta gravida at eget metus.

    Malesuada porta Etiam porta sem malesuada magna mollis euismod. Truncated term is truncated Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Вложенность Список вложенных определений Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

     class="row">  class="col-sm-3">Description lists  class="col-sm-9">A description list is perfect for defining terms.  class="col-sm-3">Euismod  class="col-sm-9"> Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus.   class="col-sm-3">Malesuada porta  class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.  class="col-sm-3 text-truncate">Truncated term is truncated  class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.  class="col-sm-3">Nesting  class="col-sm-9">  class="row">  class="col-sm-4">Nested definition list  class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.   

    Отзывчивая «типографика»

    Этот термин означает масштабирование текста и компонентов простой регулировкой коренного элемента font-size в медиа-запросах. Bootstrap не делает этого по умолчанию, но вы можете легко сделать это сами.

    Вот пример. Выбирайте какие угодно font-size и медиа-запросы.

    html  font-size: 1rem; > @include media-breakpoint-up(sm)  html  font-size: 1.2rem; > > @include media-breakpoint-up(md)  html  font-size: 1.4rem; > > @include media-breakpoint-up(lg)  html  font-size: 1.6rem; > >

    Как сделать красивый шрифт в html: размеры, цвета, теги шрифтов html

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

    Обновлено: 2023-12-28 15:10:25 АР Алина Рыбак автор материала

    Теги и атрибуты при работе со шрифтами html

    Язык гипертекста обладает большим набором средств для работы со шрифтами. Ведь именно форматирование текста является основной задачей html .

    Причиной создания языка HTML стала проблема отображения правил форматирования текста браузерами.

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

    • color – устанавливает цвет текста;
    • size – размер шрифта в условных единицах.

    Поддерживается положительное значение атрибута от 1 до 7.

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

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

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

    • — задает в html жирный шрифт. Тег по действию аналогичный предыдущему;
    • — размер больше установленного по умолчанию;
    • — меньший размер шрифта;
    • — наклонный текст ( курсив ). Аналогичный ему тег ;
    • — текст с подчеркиванием;
    • — зачеркнутый;
    • — отображение текста только в нижнем регистре;
    • — в верхнем регистре.

    Обычный текст

    Жирный текст

    Жирный текст

    Больше обычного

    Меньше обычного

    Курсив

    Курсив

    С подчеркиванием

    Зачеркнутый

    Возможности атрибута style

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

    1) font-family – свойство устанавливает семейство шрифта. Возможно перечисление нескольких значений.
    Изменение шрифта в html на следующее значение произойдет, если предыдущее семейство не установлено в операционной системе пользователя .

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

    2) font-size – задается размер от 1 до 7. Это один из основных способов того, как в html можно увеличить шрифт.
    Синтаксис написания:

    font-size: абсолютный размер | относительный размер | значение | проценты | inherit

    Размер шрифта можно также задать:

    • В пикселях;
    • В абсолютном значении ( xx-small, x-small, small, medium, large );
    • В процентах;
    • В пунктах ( pt ).

     

    font-size:7

    font-size:24px

    font-size: x-large

    font-size: 200%

    font-size:24pt

    3) font-style – устанавливает стиль написания шрифта. Синтаксис:

    font-style: normal | italic | oblique | inherit
    • normal –нормальное написание;
    • italic – курсив;
    • oblique – шрифт с наклоном вправо;
    • inherit – наследует написание родительского элемента.

    Пример того, как поменять шрифт в html с помощью этого свойства:

    font-style:inherit

    font-style:italic

    font-style:normal

    font-style:oblique

    4) font-variant – переводит все строчные буквы в заглавные. Синтаксис:

    font-variant: normal | small-caps | inherit

    Пример того, как изменить шрифт в html этим свойством:

    font-variant:inherit

    font-variant:normal

    font-variant:small-caps

    5) font-weight – позволяет установить толщину написание текста ( насыщенность ). Синтаксис:

    font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900
    • bold – устанавливает полужирный шрифт html;
    • bolder – жирнее относительно normal;
    • lighter –менее насыщенное относительно normal;
    • normal – нормальное написание;
    • 100-900 – задается толщина шрифта в числовом эквиваленте.

    font-weight:bold

    font-weight:bolder

    font-weight:lighter

    font-weight:normal

    font-weight:900

    font-weight:100

    Свойство font и цвет шрифта html

    Font является еще одним контейнерным свойством. Внутри себя оно объединило значения нескольких свойств, предназначенных для изменения шрифтов. Синтаксис font :

    font: [font-style||font-variant||font-weight] font-size [/line-height] font-family | inherit

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

    • caption – для кнопок;
    • icon – для иконок;
    • menu – меню;
    • message-box –для диалоговых окон;
    • small-caption – для небольших элементов управления;
    • status-bar – шрифт строки состояния.

    font:icon

    font:caption

    font:menu

    font:message-box

    small-caption

    font:status-bar

    font:italic 50px bold "Times New Roman", Times, serif

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

    color:#00FF99

    color:blue

    color:rgb(0, 255, 153)

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

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

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

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

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

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

    Как менять параметры

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

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

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

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

    font — family : название ;

    Например, если менять вы хотите для всего сайта, то нужно искать в таблице стилей (обычно style.css) селектор body. Обычно у него задано несколько шрифтов. Тот, что стоит самым первым после двоеточия и будет использоваться в первую очередь. Если по каким-то причинам его не получилось загрузить, браузер выберет второй и так до тех пор, пока не будет найден шрифт, который доступен для использования в данный момент.

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

    font — family : Arial , «Times New Roman» , sans — serif ;

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

    Через запятую мы указали семейство шрифтов “без засечек”. На всякий случай. Также существуют такие: serif (с засечками), cursive (курсивные), monospace (моноширинные), fantasy (декоративные). Каждое семейство для своих целей. Например, основной шрифт для чтения информации лучше выбирать без засечек.

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

    Как загрузить новый шрифт на сайт?

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

    Собственно, способов добавить новые шрифты на сайт я вижу два:

    Использовать сервис Google Fonts. Тут вы можете выбрать понравившийся шрифт и очень быстро подключать его к сайту. В таком случае никаких дополнительных папок вам подключать не нужно – все будет грузиться из хранилища сервиса, но при этом немного будет уменьшаться скорость загрузки. Поэтому я и не советую вам подключать слишком много. Максимум – 3-4 шрифта.

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

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

    После этого вы можете использовать шрифт через font-face, сервис подскажет вам, как правильно писать его название.

    Способ второй: Закачать на сайт и подключить через @font-face. В css есть специальный синтаксис, который позволяет подключить новые шрифты. Для этого их сначала нужно закачать в какую-нибудь директорию на вашем сайте. Я советую создать новую – fonts. Также такая директория уже может быть у вас, тогда просто скидываем в нее папку с файлами. Где ее взять? Ну конечно, качаем все нужные шрифты в интернете, где же еще.

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

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

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

    Размер и другие параметры

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

    То есть для тела страницы задается font-size: 100%, а всем остальным элементам он задается в относительных единицах em. Например, если вы хотите, чтобы заголовки первого уровня были в 3 раза больше обычного размера текста на странице, пропишите:

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

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