Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

Главная » Основы CSS » Шрифты в CSS. Основы CSS для начинающих. Урок №6

06.02.2017


11:05


3981


4


Шрифты в CSS. Основы CSS для начинающих. Урок №6

Шрифты в CSS. Основы CSS для начинающих. Урок №6

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

Стиль шрифта в CSS

Свойство «FONT-STYLE»
Если вы захотели поменять стиль шрифта, а именно, сделать текст курсивом или просто наклонным, то воспользуйтесь правилом «font-style».

Значение:

  • normal - нормальный шрифт;
  • italic - курсив;
  • oblique - наклонный шрифт.

Пример:

h1{
font-style:normal; /* нормальный шрифт */
}
h2{
font-style:italic ; /* курсив */
}
h3{
font-style:oblique; /* наклонный шрифт */
}

Результат:

Стиль шрифта в CSS

Толщина шрифта в CSS

Свойство «FONT-WEIGHT»
Если вы хотите сделать шрифт жирным, используйте правило «font-weight».

Значение:

  • normal - нормальная жирность
  • lighter - светлое начертание
  • bold - полужирный
  • bolder– жирный

Пример:

h1{
font-weight: normal; /* нормальная жирность */
}
h2{
font-weight: lighter; /* светлое начертание */
}
h3{
font-style:bold; /* полужирный */
}
p {font-weight:bolder; /* жирный */}

Результат:

Толщина шрифта в CSS

Можно указать толщину шрифта и обычными цифрами от 100 до 900.

Значение:

  • 100 — светлый шрифт,
  • 900 — самый жирный

Пример:

p {font-weight:900; /* жирный */}

Результат:

Толщина шрифта в CSS

Размер шрифта в CSS

Свойство «FONT-SIZE»
Шрифт можно менять по размеру. Для этого используйте правило «font-size».

Значение задается в «px» и «%».

Пример:

h1{font-size: 120%; /* размер шрифта 120% */}
p {font-size: 36px; /* размер шрифта 36px */}

Результат:

Размер шрифта в CSS

Шрифты в CSS

Свойство «FONT-FAMILY»
На каждом компьютере установлены стандартные шрифты, такие как «Times New Roman», «Arial» или «Verdana». Выбор шрифта зависит от вкуса каждого, но потом он влияет на то, как внешне будет выглядеть сайт.
Чтобы указать шрифт, воспользуйтесь правилом «font-family».

Пример:

h1 {
font-family: Verdana; /* шрифт Verdana*/
}

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

Пример:

h1
{
font-family: "Times New Roman", Georgia, Verdana; /*шрифты*/
}

Обратите внимание, шрифт «"Times New Roman"» написан в кавычках (" ").
В кавычки берутся те шрифты, в которых название состоит из двух и более слов и есть пробел между словами.

Семейство шрифтов
Можно в правило «font-family» прописать и целое семейство шрифтов.
Наверное, вы меня не совсем поняли. Сейчас попробую объяснить.
Существует множество видов шрифтов, которые образуют так называемые семейства.
Существует всего пять семейств шрифтов:

  • sans-serif – шрифты без засечек (как Arial).
    Семейство шрифтов
  • serif- семейство шрифтов с засечками (как Times New Roman).
    Семейство шрифтов
  • monospace – моноширинные шрифты, ширина каждого символа в таком семействе одинакова.
    Семейство шрифтов
  • cursive–курсивные шрифты.
    Семейство шрифтов
  • fantasy - художественные и декоративные шрифты.
    Семейство шрифтов

Пример:

h1 {
font-family: cursive; /*шрифты*/
}

А можно и вот так:

h1 {
font-family:"Times New Roman", Georgia, Serif; /*шрифты*/
}

Подключение нестандартных шрифтов в CSS

Свойство «@FONT-FACE»
Бывает такой момент, что вам просто необходимо установить на сайт нестандартный шрифт, то есть, шрифт, который не установлен по умолчанию у пользователя на компьютере.
Правило «@font-face» позволяет нам импортировать внешний файл шрифтов в документ. После импортирования, мы можем использовать нестандартный шрифт как обычный через правило «font-family».
Залейте любой нестандартный шрифт формата «ttf» в папку вашего сайта рядом с файлом css, это для того, чтобы вы не запутались и правильно написали путь к шрифту. Для примера я возьму нестандартный шрифт с именем «DS-UncialFunnyHand-Medium.ttf».
Вот пример подключения нестандартного шрифта.

@font-face
{
font-family: DS-UncialFunnyHand-Medium; /* Имя шрифта */
src: url(DS-UncialFunnyHand-Medium.ttf); /* Путь к файлу со шрифтом */
}

Разъяснения:

  • font-family: ...;- здесь пишем имя шрифта;
  • src: url(...); -  тут указываем путь к файлу со шрифтом который будет загружаться с сайта.

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

Пример:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>подключение нестандартных шрифтов</title>
<style>
@font-face
{
font-family: DS-UncialFunnyHand-Medium; /* Имя шрифта */
src: url(DS-UncialFunnyHand-Medium.ttf); /* Путь к файлу со шрифтом *
}

p{
font-family: "DS-UncialFunnyHand-Medium"; /* используем нестандартный шрифт */
}
</style>
</head>
<body>
<p>нестандартный шрифт</p>
</body>
</html>

Результат:

Подключение нестандартных шрифтов в CSS

Жду вас на следующих уроках.
Удачи!



Случайные записи:

  1. Модальное окно (всплывающее окно). Основы bootstrap 3 для начинающих. Урок №17
  2. Выпадающее меню (списки). Основы bootstrap 3 для начинающих. Урок №9
  3. Полезные функции php List, Isset, Unset, Empty, Date, Count и Exit. Основы PHP с нуля. Урок №18
  4. Блоки в CSS. Основы CSS для начинающих. Урок №13
  5. Создание дополнительных классов. Основы bootstrap 3 для начинающих. Урок №23

Последние записи рубрики:

  1. Бесплатный курс по основам CSS
  2. Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу
  3. Тесты CSS онлайн. Основы CSS для начинающих
  4. Слои в CSS. Основы CSS для начинающих. Урок №16
  5. Плавающие блоки в CSS. Основы CSS для начинающих. Урок №15

4 ответа(ов) на статью: “Шрифты в CSS. Основы CSS для начинающих. Урок №6”

  1. Адексей says:

    Спасибо автору за статью, полезная, немного нового для себя вынес)

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Пожалуйста, Алексей!

    Ответить

  2. Инга says:

    Добрый день, к сожалению я не смогла разобраться с нестандартным шрифтом. У меня виден самый обыкновенный шрифт. (( Думаю, не работает ссылка.

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Здравствуйте! Проверьте путь к шрифту.

    Ответить

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 245