Как изменить размер и цвет шрифта на сайте. Изменить на сайте шрифт


Как изменить шрифт на сайте: 2 рабочих способа

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

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

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

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

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

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

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

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

font-family: Arial, "Times New Roman", sans-serif;

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 раза больше обычного размера текста на странице, пропишите:

Ну и так далее. Подобная запись позволяет размерам меняться в зависимости от настроек браузера пользователя.

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

Что ж, надеюсь, работа с контентом стала для вас чуть понятней.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

HTML5 и CSS3 с Нуля до Профи

Научись верстать сайты, используя все возможности HTML5 и CSS3, прямо сейчас

Научиться

webformyself.com

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

Здравствуйте, уважаемые друзья. Сегодня мы поговорим о том, как изменить шрифты на сайте. От того какой шрифт или семейство шрифтов используется и зависит вид, в котором предстаёт сайт перед посетителями.

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

Этот метод идеально подходит для «лендингов».

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

Что влияет на отображение шрифтов сайта

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

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

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

пример для Windows

c:\windows\fonts

где, с: — имя раздела жёсткого диска

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

Настройки браузера

Настройки браузера

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

Какие параметры отвечают за отображение шрифта на сайте

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

Блочная вёрстка

Блочная вёрстка

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

Итак, основными параметрами шрифта являются:

font-family: — какими шрифтами будет отображаться ваш сайт.

font-size: — размер шрифта.

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

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

К примеру, на моём блоге это выглядит так:

font- family: Arial,Verdana;

Что говорит о том, что в первую очередь сайт будет отображаться шрифтом Arial, а если у посетителя его нет (маловероятно), тогда Verdana. А если и его нет, то шрифтом, определённым в браузере.

Как настроить красивые шрифты для всех посетителей

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

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

Ну, давайте приступать.

Шаг 1.

Переходим в библиотеку шрифтов Google. И ищем подходящий шрифт для своего сайта.

Библиотека шрифтов Гугл

Библиотека шрифтов Гугл

Нужно выбрать шрифты, поддерживающие кириллицу. Эти же шрифты будут поддерживать и латинские символы. Следовательно, проблем не будет.

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

Шаг 2.

Теперь следует выполнить 4 шага. Учтите, раз вы подгружаете шрифт со стороннего сервера, значит, это влияет на скорость загрузки сайта. В этом, конкретном случае незначительно, но всё же. Как узнать скорость загрузки сайта можете посмотреть здесь.

Первым делом нужно выбрать стиль отображения шрифта.

Стиль шрифта

Стиль шрифта

Далее отмечаете, какие языки должны поддерживаться.

Языки шрифта

Языки шрифта

Шаг 3.

Теперь предложенный код на третьем этапе нужно вставить в шаблон вашего сайта.

<link href='http://fonts.googleapis.com/css?family=Lora:400italic&subset=latin,cyrillic' rel='stylesheet' type='text/css'>

Код, предложенный на третьем шаге, нужно вставить в заголовок вашего сайта. Как правило, за заголовок отвечает файл header.php. Код вставляем в теги ХЕД

<head>Ваш код</head>Код в шапке сайта

Код в шапке сайта

Шаг 4.

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

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

Анализ исходного кода

Анализ исходного кода

Главное, узнать класс нужного блока, в каком файле и в какой строке нужно вносить изменения.

Как видно на скриншоте выше, мне нужно найти в файле style.css (таблица стилей) 183 строку и в неё добавить нужный шрифт.

Так как в редакторе WordPress нет номера строки, я использую поиск (CTRL+F) и ищу класс нужного мне блока. Найдя его, вношу нужные изменения.

Изменяем шрифт

Изменяем шрифт

Вы, на моём примере, делаете нечто подобное, но со своей темой.

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

Шрифт изменен

Шрифт изменен

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

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

До встречи в следующих статьях.

С уважением, Максим Зайцев.

Адаптивная, SEO подготовленная WordPress тема

1zaicev.ru

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

Всем привет, сегодня я вам расскажу как можно поставить новый шрифт, которой не находится в стандартной web библиотеке. Для примера мы будем использовать библиотеку от Google, а так же другие источники. Для начала, как изменить шрифт на своём сайте… Для этого нужно использовать свойство “font-family” (это CSS).

Мы пишем следующие:

font-family: Шрифт;

(если название шрифта состоит из нескольких слов, мы его заключаем в кавычки. Вот так “Название шрифта”)

Стандартные шрифты

Начнём со стандартных шрифтов.

1. Arial 2. Verdana 3. Times 4. Times New Roman 5. Georgia 6. Trebuchet MS 7. Sans 8. Sans 9. Comic Sans MS 10. Courier New 11. Webdings 12. Garamond 13. Helvetica

Тоже стандартные шрифты, но не для всех ОС:

1. Palatino Linotype / Palatino 2. Tahoma 3. Impact 4. Century Gothic 5. Arial Black 6. Arial Narrow 7. Copperplate / Copperplate Gothic Light 8. Gill Sans / Gill Sans MT

Для того что бы их использовать, нужно только указать название в свойстве css.

Это всё что касается стандартных шрифтов.

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

Шрифты от Google

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

Она бесплатная, и не требует дополнительного программного обеспечения.

Чтобы установить шрифты с Google Fonts, вам нужно:

  1. Перейти на данный сайт https://fonts.google.com/
  2. Выбрать шрифт нажав на значок плюса рядом с названием шрифта.
  3. После выбора всех нужных шрифтов, нажимаем на скрытую панель снизу сайта
  4. Появится окно, в котором нам нужно будет скопировать код. Это можно сделать двумя способами:
  • скопировать вот этот код, и вставить его в html документ в тег head, а название шрифта разместить в стандартное для этого свойство CSS как показано ниже.
  • для второго способа вам необходимо скопировать другой код и вставить его в CSS файл. Импорт-код необходимо разместить на самом верху (это важно). А так же как и в прошлом способе, необходимо разместить название шрифта в специальное для этого свойство(font-family).

Добавление из других источников.

Вначале загружаем сам файл шрифта с помощью правила @font-face. Внутри него пишем название гарнитуры шрифта через параметр font-family и путь к файлу через src. Дальше используем шрифт как обычно. Так, если нам требуется задать шрифт заголовка, то для селектора h2, как показано в примере, задаём свойство font-family с именем загруженного шрифта.

Это всё что касается добавления шрифтов и изменения шрифтов.

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

Если у вас есть вопросы, пишите их в нашей группе – https://vk.com/progtime

Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи – https://vk.com/prog_time

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

Так же прокачивайте свои навыки на нашем канале – https://www.youtube.com/c/ProgTime

Рекомендованные

 

Вам также будет интересно

 

prog-time.ru

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

Как изменить шрифт на сайте и как изменить цвет шрифтаВ этой статье я хочу рассказать о том, как изменить шрифт на сайте wordpress и как изменить цвет текста для лучшего его восприятия и гармонии с шаблоном. Но перед тем как изменить размер шрифта, нужно понимать, что есть заголовки h2, h3, …, H6, есть текст шапки сайта (header.php), есть текст контента рубрик (archive.php), отдельных записей (single.php) и контента страниц (page.php), текст сайдбара (sidebar.php) и подвала (footer.php). То есть, в каждой части сайта шрифт и цвет меняется отдельно, но делается это в шаблоне под названием таблица стилей (style.css).

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

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

Открываем браузер Google Chrom, в нем открываем свой сайт. К примеру, нужно изменить размер шрифта текста записей или заголовков, для этого необходимо навести мышкой, и выделить любую часть шрифта который хотите поменять, нажать на нем правую кнопку мыши и выбрать пункт, просмотр кода элемента (показано ниже).Как изменить шрифт на сайте wordpressПосле этого, в нижней части экрана появится следующее окошко кода:Wordpress изменить размер шрифтаЗдесь необходимо, в правой части найти строку font-size:, которая отвечает за размер выделенного шрифта и скопировать первую строку, которая отвечает за данный отдел (показано на рисунке).

Теперь осталось лишь найти данную строку кода в шаблоне сайта style.css, о нем я говорил в начале и данная страница должна уже быть открыта в отдельном окне. Переходим в нее и нажимаем кнопки на клавиатуре ctrl+f, вверху справа открывается окно поиска, в нем и нужно вставить скопированную строку кода. На странице она находится автоматически и первая строка, font-size: которая размещена под ней, отвечает за нужный нам размер шрифта, здесь мы его меняем, сохраняем изменения  и смотрим результат (показано на рисунке ниже).размер шрифта на вордпресс

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

Открываем сайт в браузере Google Chrom, выделяем участок текста, в котором хотим поменять цвет, нажимаем правую кнопку мыши и нажимаем на пункт просмотр кода элемента. В правой части открывшегося окна, находим строку color:, которая отвечает за цвет выделенного нами текста, и копируем первую строку данного отдела, как показано на рисунке ниже (ниже показан пример изменения цвета заголовка статьи).Как изменить цвет текста на сайте wordpressДанную, скопированную строку необходимо найти в style.css. Для этого, открываем страницу style.css (как это сделать описано во втором абзаце данной статьи) и, находясь на ней, нажимаем ctrl+f, вверху справа открывается окно поиска, скопированную строку вставляем в нее. На странице она находится автоматически, и первая строка color: которая будет под ней и будет отвечать за цвет заголовка на данной странице, ее и нужно менять (показано на картинке ниже).Как изменить цвет текста на сайте вордпрессНа этом у меня все. Я надеюсь, что не очень запутал вас. Могу сказать лишь то, что если даже вам показалось это сложно, то это лишь в первый раз, изменяя шрифт или цвет текста повторно, вы поймете что на самом деле это делается в течении одной лишь минутки ;-).

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

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

«Есть еще! Смотрите» Форма2

vi-internet.ru

Как изменить размер и цвет шрифта на сайте для текста и заголовка

Наверняка вы замечали, что на многих сайтах размер шрифта очень мелкий, из-за чего приходится напрягать зрение, увеличивать буквы с помощью мыши ( Ctrl + крутим колесико мышки ) и вообще чувствовать себя некомфортно. Хочется поскорее покинуть такой сайт. Тем более что есть еще один немаловажный момент: в последнее время все больше людей выходят в интернет с мобильных устройств, а там, поскольку экран маленький, графические отображения играют большую роль.Между тем, решить вопрос, как говорится, раз чихнуть. Для этого откройте любую свою статью, выделите кусочек текста, щелкните по нему правой кнопкой мыши и выберите пункт «Исследовать элемент».После этого в нижней части экрана появится окошко кода, где с правой стороны увидите вот такую картину.В строке font-size:15px; нужно поменять цифру в большую сторону. Щелкните по ссылке «Style.css:739», окроется файл «Style.css», прокрутите вниз и найдите строку 739, где и поменяйте цифру на нужную вам. Для тех, кто панически боится кодов, скриптов, любых изменений на блоге: на этом этапе вам нечего опасаться, вы просто смотрите, что произойдет, если сделаете так-то и так-то. После того как перезагрузитесь, все изменения исчезнут и страница примет прежний вид.

А чтобы они вступили в силу нужно редактировать сам файл. Для этого пройдите по адресу «Внешний вид» — «Редактор», откройте файл «Style.css», нажмите Ctrl+f и в появившееся окошко введите такую строку кода — #main_content_post p. Внесите изменения и обновите файл. Должен предупредить, что чрезмерно большие буквы тоже плохо влияют на восприятие, все хорошо в меру.

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

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

Решение находится в header.php, потому что заголовок относится именно к этому файлу. В строку вывода названия сайта добавим такую команду — padding: 0px;»>. Тем самым мы задали размер только заголовку. Таким же образом можно редактировать и описание сайта. Чтобы при этом чувствовать себя более уверенно, сделайте резервное копирование. Если что пошло не так, можно откатиться назад и в панели управления хостинга.

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

Порядок действий тот же, что и на примерах выше, единственно, будем искать слово «color». Если из предложенных вариантов вам ничего не подошло, но где-то вы видели приятный для глаза цвет, узнать его html-код поможет замечательная программка Pixie, советую.

И в заключение несколько слов о стиле шрифта, отвечает за это строка «font-family». Обычно указываются 3 различных вида, выстроенные по приоритету, то есть на вашем сайте используется шрифт, стоящий под номером один. Меняйте местами, экспериментируйте, творите.

owlweb.ru

Как изменить шрифт на сайте WordPress. Как добавить новый шрифт в WordPress с Google Fonts

Здравствуйте, друзья! В этом уроке мы разберем с Вами как изменить шрифт на сайте WordPress. Устанавливать новый шрифт будем с Google Fonts, так как это самый популярный, простой и надежный сервис с огромным выбором шрифтов. Итак, приступим!

Как подключить на сайт шрифт с Google Fonts

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

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

Также можно отсортировать шрифты по типу и другим параметрам.

2. Теперь выберите из списка понравившийся шрифт и нажмите кнопку «Quick-use».

Как подключить на сайт шрифт с Google Fonts

3. В открывшемся окне нужно отметить галочками стили (к примеру Normal, Medium, Bold), которые собираетесь использовать на сайте. Также рекомендую ставить галочку и на латинским наборе, так как зачастую на сайте используются и латинские буквы.

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

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

Давайте разберем более детально способы подключения Standard и @import.

Способ 1

Standard — нужно скопировать строчку подключения шрифта и добавить ее в шапку сайта.

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

Сделать это очень просто. Переходим с административной панели в Внешний вид -> Редактор -> Заголовок (header.php) и добавляем код в содержимое тега <head></head>. Результат будет выглядеть так (на примере темы Twenty Twelve):

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

Способ 2

@import — нужно скопировать и добавить код в CSS стили сайта.

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

О том, как открыть и редактировать CSS стили мы говорили в одном из прошлых уроков.

Важно! Используйте только один способ подключения, не нагружайте зря сайт.

Использование нового шрифта на сайте

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

Использование нового шрифта на сайте

К примеру, для изменения шрифта на заглавиях h2, h3, h4 нужно добавить (или заменить, если для элементов уже установлен какой-то шрифт) такой код:

h2, h3, h4 { font-family: 'Roboto', sans-serif; }

Как видите, сложного совершенно ничего нету. Изменить шрифт на сайте — дело 5 минут.

В случае, если у Вас что-то не получилось или возникли вопросы — смело пишите в комментариях.

Здравствуйте, друзья! В этом уроке мы разберем с Вами как изменить шрифт на сайте WordPress. Устанавливать новый шрифт будем с Google Fonts, так как это самый популярный, простой и надежный сервис с огромным выбором шрифтов. Итак, приступим! Как подключить на сайт шрифт с Google Fonts 1. Сперва нужно выбрать шрифт, который мы будем устанавливать на сайт. Для этого переходим на сайт Google Fonts и сразу же сортируем шрифты так, чтобы они были "кириллические". Если этого не сделать, то подключенный шрифт может не работать с русским или украинским текстом. Также можно отсортировать шрифты по типу и другим параметрам. 2. Теперь выберите из списка понравившийся шрифт и&hellip;

Установка нового шрифта на сайт WordPress

Рейтинг: 4.73 ( 21 голосов ) 100

wp-lessons.com

seodon.ru | Учебник HTML - Как изменить шрифт?

Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

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

Изменение стилей шрифтов

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

<B>...</B> и <STRONG>...</STRONG> — выделяют текст полужирным шрифтом.

<I>...</I> и <EM>...</EM> — выделяют текст курсивом.

<SUP>...</SUP> — выводит текст в верхнем индексе, например E = mc2.

<SUB>...</SUB> — выводит текст в нижнем индексе, например h3SO4.

Все эти теги являются встроенными (inline, уровня строки), то есть не создают переносы строк до и после себя, а располагаются на одной строке. Содержать они могут тоже только встроенные элементы, поэтому их свободно можно вкладывать друг в друга. Самое главное не забывайте о правильной вложенности: тег, открытый раньше — должен быть закрыт позже.

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

Вы спросите: «Но неужели указанные выше теги — это все, чем можно выделить текст в HTML»? Ну конечно же нет! Существуют еще теги <S> и <STRIKE>, подчеркивающие текст, а также тег <U>, отображающий зачеркнутый текст. Но, видите ли, эти теги являются устаревшими в HTML и их, как и атрибут align, возможно скоро перестанут понимать браузеры. Поэтому я вам покажу другой способ, который вы можете использовать без опаски. А заключается он в применении атрибута style, причем его допустимо указывать внутри любых тегов. Общий синтаксис следующий:

<тег>...</тег> — подчеркивает текст.

<тег>...</тег> — надчеркивает текст.

<тег>...</тег> — зачеркивает текст.

Пример изменения стилей шрифтов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1251"> <title>Изменение стилей шрифтов</title> </head> <body> <p><b>Жирный шрифт.</b> <i>Курсив.</i></p> <p><b><i>Жирный курсив.</i></b></p> <p><em>H<sub>2</sub>SO<sub>4</sub></em> - формула серной кислоты написанная курсивом.</p> <p>Подчеркнутый параграф текста.</p> <p>Обычный текст, <strong>зачеркнутый жирный.</strong> </p> </body> </html>

Результат в браузере

Жирный шрифт. Курсив.

Жирный курсив.

h3SO4 - формула серной кислоты написанная курсивом.

Подчеркнутый параграф текста.

Обычный текст, зачеркнутый жирный.

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

<тег>...</тег>

Используя style вы совершенно ничего не потеряете, но зато научитесь писать грамотный HTML, а в качестве бонуса еще и CSS немного освоите.

Тег <SPAN> или что делать, когда нет нужных тегов

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

Итак, знакомьтесь — <SPAN>...</SPAN>. Этот тег тоже является встроенным (inline, уровня строки) и может содержать любые встроенные теги, но главное не это. Сам по себе <SPAN>, без атрибутов, не добавляет никаких изменений ни тексту, ни тегам находящимся внутри него. А создан он был специально для стилей, то есть, по сути, для атрибута style. Именно благодаря этому атрибуту, а вернее его разным значениям, у <SPAN> появляются те или иные свойства. Вот так, а теперь изучаем пример.

Пример использования тега SPAN

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1251"> <title>Использование тега SPAN</title> </head> <body> <p><span>Обычный текст без изменений.</span></p> <p>Еще обычный текст. <span>Подчеркнутый.</span> <span>Зачеркнутый.</span> </p> </body> </html>

Результат в браузере

Обычный текст без изменений.

Еще обычный текст. Подчеркнутый. Зачеркнутый.

Меняем имя (гарнитуру) шрифта

Не знаете что такое имя шрифта? Наверняка многие из вас хоть когда-то набивали текст в Microsoft Word или OpenOffice Writer и видели такое меню:

Меню выбора шрифта в Microsoft Word.

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

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

ШрифтыСемейство
'Comic Sans MS'cursive (рукописные)
Couriermonospace (моноширинные)
Arial, Helvetica, Verdana, Tahomasans-serif (рубленные, гротески)
Times, 'Times New Roman', Garamondserif (с засечками, антиква)

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

<тег>...</тег>

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

Чтобы изменить шрифт на всей странице — достаточно указать атрибут style в теге <BODY>. А если необходимо изменить шрифт для отдельной части текста, то заключите его в тег <SPAN> и примените атрибут к нему.

Пример изменения имени шрифтов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1251"> <title>Изменение имени шрифтов</title> </head> <body> <p>Это шрифт Arial, если его нет, то Verdana, а если и его нет, то любой другой из sans-serif. </p> <p> Это Comic Sans MS или любой cursive. </p> <p>Это опять Arial, Verdana или любой sans-serif. <span> А это Courier или любой monospace. </span> </p> </body> </html>

Результат в браузере

Это шрифт Arial, если его нет, то Verdana, а если и его нет, то любой другой из sans-serif.

Это Comic Sans MS или любой cursive.

Это опять Arial, Verdana или любой sans-serif. А это Courier или любой monospace.

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

Меняем размер шрифта

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

В CSS есть порядка десяти единиц измерения, но мы с вами рассмотрим только три самых популярных — это пункты (pt), пиксели (px) и проценты (%). Итак:

  • pt — Пункты. Один пункт равен 1/72 дюйма, а один дюйм — 2.54см. Следовательно, 1pt = 0,03527778см. Это абсолютная величина, так как размер заданный в пунктах не зависит ни от чего.
  • px — Пиксели. Измеряется в пикселях монитора компьютера. Пиксель — это самая маленькая точка на мониторе и она является относительной величиной, так как ее размер зависит от текущего разрешения экрана и размера самого монитора.
  • % — Проценты. Высчитывается в процентах, где за 100% берется значение родительского тега, а если оно не указано, то значение в браузере по умолчанию. Это тоже относительная величина, ведь размер шрифта родителя может быть абсолютно разный, да и размер шрифта в браузере пользователи могут свободно менять.

Чтобы указать размер шрифта используется атрибут style и его можно указать внутри любого тега. Общий синтаксис такой:

<тег>...</тег>

Как и в случае с именами шрифтов, чтобы изменить размер шрифта на всей странице — достаточно указать атрибут style в теге <BODY>. А если необходимо изменить шрифт для фрагмента текста, то заключите его в тег <SPAN> и примените атрибут к нему.

Пример изменения размера шрифтов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1251"> <title>Изменение размера шрифта</title> </head> <body> <p>Этот размер шрифта составляет 90% от размера в браузере по умолчанию. </p> <p> Этот размер составляет 90% уже от размера в теге BODY. </p> <h5> Размер шрифта заголовка составляет 120% от размера в BODY. </h5> <p>Это опять 90% от размера в браузере по умолчанию. <span> Размер этого шрифта 15 пунктов. </span> </p> </body> </html>

Результат в браузере

Этот размер шрифта составляет 90% от размера в браузере по умолчанию.

Этот размер составляет 90% уже от размера в BODY.

Размер шрифта заголовка составляет 120% от размера в BODY.

Это опять 90% от размера в браузере по умолчанию. Размер этого шрифта 15 пунктов.

Размер шрифта зависит не только от его явного указания, но и от его имени (гарнитуры) — разные шрифты могут иметь совершенно разные высоту и ширину букв, а также межбуквенное расстояние.

Еще немного об атрибуте style

Самое время раскрыть вам еще один секрет этого чудесного атрибута, но опять сначала задам вам вопрос. Как бы вы поступили, если бы вам надо было установить для всего параграфа имя шрифта Arial с размером в 80%? А я вам скажу, вы бы написали что-то подобное:

Так.

<p> <span> Текст параграфа. </span> </p>

Вот так.

<p> <span> <span> Текст параграфа. </span> </span> </p>

Или вообще вот так.

<p> Текст параграфа. </p>

Я прав? Ну что ж, если первые два варианта в принципе верны, то последний вообще с ошибкой, так как, если помните, в одном теге не может быть двух одинаковых атрибутов. А теперь пора вспомнить, что style — не просто атрибут, а атрибут относящийся к CSS. Посмотрите-ка на это:

<p> Текст параграфа. </p>

Гораздо проще, да? Самое главное не забывать ставить между соседними стилями точку с запятой (;) и брать все это «хозяйство» в двойные кавычки (" "), иначе применится только первый стиль, а остальные браузер проигнорирует. Ну мы ведь всегда с вами проставляем двойные кавычки, правда?

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

Домашнее задание.

  1. Создайте заголовок статьи и двух ее разделов, но заголовки разделов еще и подчеркните.
  2. Сделайте так, чтобы при наведении курсора мыши на заголовок статьи появлялась соответствующая надпись.
  3. Напишите один параграф в начале статьи и по два в каждом разделе.
  4. Установите для всей страницы шрифт Arial с размером 90% от размера в браузере по умолчанию.
  5. Установите для всех заголовков шрифт Times и пусть заголовок статьи будет с размером шрифта в 150%, а подзаголовки — 120%.
  6. Выделите в первом параграфе два слова жирным шрифтом и одно курсивом. Во втором — фразу из нескольких слов жирным курсивом. В третьем — подчеркните фразу выделенную курсивом. В четвертом — зачеркните половину фразы выделенной жирным.
  7. Напишите в последнем параграфе формулу спирта: C2H5OH.

Посмотреть результат → Посмотреть ответ

seodon.ru