Размер шрифта css

#размершрифтаcss, #размершрифта, #код , #обозначение ,

Коды с данной страницы см.здесь - Тема: Текст, № 3.

Новые шрифты для сайта – качаем отсюда!

Если вас интересует вопрос изменения шрифта га компьютере, то вас сюда

Мы же поговорим о размере шрифта на сайте, который можно изменить через css. По сложившейся ситуации рассмотрим несколько вариантов:

1. Создадим, новую страницу, прикрепим к ней таблицу стилей, css,  и создадим  пару стилей, которые покажут нам возможности изменения шрифтов через css..
2. Создадим стили, прикрепим к данной странице, минуя файл css, который уже прикреплён к данной странице!
3. Когда вы не очень разбираетесь в коде, то бывает довольно трудно разобраться в коде и найти именно, тот шрифт, который вам нужен! Поговорим и об этом!

Начнём с того, что размер шрифта в css обозначается свойством:

font-size

1.

Создадим файл css – назовём его :

Razmer-shrifta-css-Primer.css

 и вставим туда данный код.

Я не буду далеко ходить и скопирую сюда, код данного шрифта, которым написаны эти строчки!

Только, название вот этого  id -#rightPan нужно удалить, потому, что в новой странице такого дива с таким id не будет!

#rightPan p{
color:#000000;
font-size: 17px;
letter-spacing: 0.07em;
font-family: "Times New Roman", Times, serif;
text-indent: 25px;
line-height: 1em;
}

Смотрим, что у нас получилось.

Создаём новый файл html, и прикрепим созданный файл css,  и назовём его:

Razmer-shrifta-css-Primer.html

Далее нам нужно создать текст с абзацем такого вида:

<p>Пример шрифта, который выставлен по умолчанию. </p>

Весь текст, который будет начинаться с   обозначения <p> будет иметь такой шрифт!

Как можно изменить размер данного шрифта? Просто изменить цифровое значение в строке:

font-size: 17px;

Далее, к примеру, вам нужно написать другой текст, с другим размером шрифта, на данной странице, что можно сделать!?

Берём тот же стиль  и прикрепим к нему  новый класс! Назовем его:

Razmer-shrifta-css-Primer

Изменим цифру в строке, ну например на 25

font-size: 17px;

Вот, что должно получиться!

p .Razmer-shrifta-css-Primer {
color:#000000;
font-size: 25px;
letter-spacing: 0.07em;
font-family: "Times New Roman", Times, serif;
text-indent: 25px;
line-height: 1em;
}

Теперь создадим абзац с таким стилем:

<p class="Razmer-shrifta-css-Primer">Пример шрифта, который мы изменили</p>

Здесь нужно отметить, что если вы присвоите диву(div) этот класс, то все ваши тексты будут иметь изменений размер шрифта! Т.е. вам не нужно каждый раз, в ном абзаце прописывать калсс!

К примеру:

<div class="Razmer-shrifta-css-Primer">
<p>Здесь будет располагаться текст, который в диве</p>

<p>Здесь будет располагаться текст-2, который в диве</p>
</div>

Но с дивом так не работает, поэтому, после класса, нужно поставить абзац, и стили будет выглядеть так:

+ изменим размер шрифта на 35px;, чтобы три варианта отличались!

.Razmer-shrifta-css-Primer p{
color:#000000;
font-size: 35px;
letter-spacing: 0.07em;
font-family: "Times New Roman", Times, serif;
text-indent: 25px;
line-height: 1em;
}

Смотрим, что у нас получилось!

Изменить размер шрифта css.

Следующим шагом, мы изменим размер шрифта на данной странице, тоже через css, только минуя файл css, который прикреплён к данной странице!

Зачем это нужно, ну к примеру, нужно на одной странице сделать отличавшийся текст от основного!

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

<style type="text/css">
<!--
/* CSS Document */
#rightPan  p.Razmer-shrifta-css-Primer {
color:#000000;
font-size: 25px;
letter-spacing: 0.07em;
font-family: "Times New Roman", Times, serif;
text-indent: 25px;
line-height: 1em;
}
-->
</style>

Далее нам нужно создать текст, облачить его в абзац, и прикрепить класс!

<p class="Razmer-shrifta-css-Primer ">Текст на странице, к которому будет прикреплён новый стиль,  и он будет отличаться от основного текста, своим размером!</p>

Смотрим, что  унас получилось:

Текст на странице, к которому будет прикреплён новый стиль, и он будет отличаться от основного текста, своим размером!

Что касается использования  в данной ситуации  дива. Прикрепим к нему данный класс, и каждый раз создавая абзац, вам не нужно применять данный класс и немного изменить запись класса:

#rightPan .Razmer-shrifta-css-Primer p{
color:#000000;
font-size: 25px;
letter-spacing: 0.07em;
font-family: "Times New Roman", Times, serif;
text-indent: 25px;
line-height: 1em;
}

Для того, чтобы увидеть код и стили, который мы использовали нажимаем в  браузере ctrl + U, после тегов.

3.

Если рассматривать вопрос номер 3 на этой странице, то не вижу смысла заново повторять, я уже писал об этом в теме:

как изменить расстояние между строк!

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