Как изменить вид текста html

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

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

  • Теги и атрибуты при роботе со шрифтами html
    • Возможности атрибута style
    • Свойство font и цвет шрифта html
    • Русскоязычные шрифты и их поддержка

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

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

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

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

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

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

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

Пример:

<p>
<font size="7" color="red" face="Arial">Форматируется только тот текст, который расположен между частями парного тега font.</font>
Остальной текст отображается стандартным шрифтом, установленным по умолчанию.
</p>

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

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

  • <strong> — задает в html жирный шрифт. Тег <b> по действию аналогичный предыдущему;
  • <big> — размер больше установленного по умолчанию;
  • <small> — меньший размер шрифта;
  • <em> — наклонный текст (курсив). Аналогичный ему тег <i>;
  • <ins> — текст с подчеркиванием;
  • <del> — зачеркнутый;
  • <sub> — отображение текста только в нижнем регистре;
  • <sup> — в верхнем регистре.

Пример:

<p>Обычный текст</p>
<p><strong>Жирный текст</strong></p>
<p><b>Жирный текст</b></p>
<p><big>Больше обычного</big></p>
<p><small>Меньше обычного</small></p>
<p><em>Курсив</em></p>
<p><i>Курсив</i></p>
<p><ins>С подчеркиванием</ins></p>
<p><del>Зачеркнутый</del></p>

Кроме описанных тегов существует еще несколько способов, как изменить шрифт в 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).

Пример:

<p style="font-size:7"> font-size:7</p>
<p style="font-size:24px"> font-size:24px</p>
<p style="font-size:x-large"> font-size: x-large</p>
<p style="font-size:200%"> font-size: 200%</p>
<p style="font-size:24pt"> font-size:24pt</p>

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

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

font-style: normal | italic | oblique | inherit

Значения:

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

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

<p style="font-style:inherit">font-style:inherit</p>
<p style="font-style:italic">font-style:italic</p>
<p style="font-style:normal">font-style:normal</p>
<p style="font-style:oblique">font-style:oblique</p>

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

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

font-variant: normal | small-caps | inherit

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

<p style="font-variant:inherit">font-variant:inherit</p>
<p style="font-variant:normal">font-variant:normal</p>
<p style="font-variant:small-caps">font-variant:small-caps</p>

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 – задается толщина шрифта в числовом эквиваленте.

Пример:

<p style="font-weight:bold">font-weight:bold</p>
<p style="font-weight:bolder">font-weight:bolder</p>
<p style="font-weight:lighter">font-weight:lighter</p>
<p style="font-weight:normal">font-weight:normal</p>
<p style="font-weight:900">font-weight:900</p>
<p style="font-weight:100">font-weight:100</p>

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 – шрифт строки состояния.

Пример:

<p style="font:icon">font:icon</p>
<p style="font:caption">font:caption</p>
<p style="font:menu">font:menu</p>
<p style="font:message-box">font:message-box</p>
<p style="font:small-caption">small-caption</p>
<p style="font:status-bar">font:status-bar</p>
<p style="font:italic 50px bold "Times New Roman", Times, serif">font:italic 50px bold "Times New Roman", Times, serif</p>

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

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

Пример:

<p style="color:#00FF99">color:#00FF99</p>
<p style="color:blue">color:blue</p>
<p style="color:rgb(100,50,180)">color:rgb(0, 255, 153)</p>

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

  • Arial Black;
  • Arial;
  • Comic Sans MS;
  • Courier New;
  • Georgia;
  • Lucida Console;
  • Lucida Sans Unicode;
  • Palatino Linotype;
  • Tahoma;
  • Times New Roman;
  • Trebuchet MS;
  • Verdana.
    Если этого количества мало, то на просторах интернета хватает сайтов, где можно скачать шрифт на любой вкус. Еще можно разработать свой шрифт. Но это уже совсем другая история. И она будет написана уже другим шрифтом.
Источник

Основы стилизирования текста и шрифта

  • Обзор: Styling text
  • Далее

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

Необходимые знания: Базовые компьютерные знания, Основы HTML (раздел Введение в HTML), основы CSS (раздел Введение в CSS).
Задача: Изучить основные свойства и техники, необходимые для стилизации текста на веб-страницах.

Что участвует в стилизации текста в CSS?

Как вы уже проверили в своей работе с HTML и CSS, текст внутри элемента выкладывается в поле содержимого элемента. Он начинается в левом верхнем углу области содержимого (или в правом верхнем углу, в случае содержимого языка RTL) и течёт к концу строки. Как только он достигает конца, он переходит к следующей строке и продолжает, затем к следующей строке, пока все содержимое не будет помещено в коробку. Текстовое содержимое эффективно ведёт себя как ряд встроенных элементов, размещённых на соседних строках и не создающих разрывы строк до тех пор, пока не будет достигнут конец строки, или если вы не принудите разрыв строки вручную с помощью элемента <br>.

Примечание: если приведённый выше абзац оставляет вас в замешательстве, то не имеет значения — вернитесь и просмотрите нашу статью о модели коробки, чтобы освежить теорию модели коробки, прежде чем продолжить.

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

  • Font styles: Свойства, влияющие на шрифт, применяемый к тексту, влияющие на то, какой шрифт применяется, насколько он велик, является ли он полужирным, курсивным и т. д.
  • Text layout styles: Свойства, влияющие на интервал и другие особенности компоновки текста, позволяющие манипулировать, например, пространством между строками и буквами, а также тем, как текст выравнивается в поле содержимого.

Примечание: имейте в виду, что текст внутри элемента все затронуты как одна единая сущность. Вы не можете выбирать и стилизовать подразделы текста, если вы не обернёте их в соответствующий элемент (например, <span> или <strong>), или использовать текстовый псевдоэлемент, такой как ::first-letter (выделяет первую букву текста элемента),:: first-line (выделяет первую строку текста элемента) или ::selection (выделяет текст, выделенный в данный момент курсором.)

Шрифты

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

<h1>Tommy the cat</h1>

<p>Well I remember it as though it were a meal ago...</p>

<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
 may have nestled its way into his mighty throat. Many a fat alley rat
had met its demise while staring point blank down the cavernous barrel of
 this awesome prowling machine. Truly a wonder of nature this urban
predator — Tommy the cat had many a story to tell. But it was a rare
occasion such as this that he did.</p>

You can find the finished example on GitHub (see also the source code.)

Color

The color (en-US) property sets the color of the foreground content of the selected elements (which is usually the text, but can also include a couple of other things, such as an underline or overline placed on text using the text-decoration (en-US) property).

color can accept any CSS color unit, for example:

This will cause the paragraphs to become red, rather than the standard browser default black, like so:

<h1>Tommy the cat</h1>

<p>Well I remember it as though it were a meal ago...</p>

<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
 may have nestled its way into his mighty throat. Many a fat alley rat
had met its demise while staring point blank down the cavernous barrel of
 this awesome prowling machine. Truly a wonder of nature this urban
predator — Tommy the cat had many a story to tell. But it was a rare
occasion such as this that he did.</p>

Font families

To set a different font on your text, you use the font-family property — this allows you to specify a font (or list of fonts) for the browser to apply to the selected elements. The browser will only apply a font if it is available on the machine the website is being accessed on; if not, it will just use a browser default font. A simple example looks like so:

p {
  font-family: arial;
}

This would make all paragraphs on a page adopt the arial font, which is found on any computer.

Web safe fonts

Speaking of font availability, there are only a certain number of fonts that are generally available across all systems and can therefore be used without much worry. These are the so-called web safe fonts.

Most of the time, as web developers we want to have more specific control over the fonts used to display our text content. The problem is to find a way to know which font is available on the computer used to see our web pages. There is no way to know this in every case, but the web safe fonts are known to be available on nearly all instances of the most used operating systems (Windows, macOS, the most common Linux distributions, Android, and iOS).

The list of actual web safe fonts will change as operating systems evolve, but it’s reasonable to consider the following fonts web safe, at least for now (many of them have been popularized thanks to the Microsoft Core fonts for the Web initiative in the late 90s and early 2000s):

Name Generic type Notes
Arial sans-serif It’s often considered best practice to also add Helvetica as a preferred alternative to Arial as, although their font faces are almost identical, Helvetica is considered to have a nicer shape, even if Arial is more broadly available.
Courier New monospace Some OSes have an alternative (possibly older) version of the Courier New font called Courier. It’s considered best practice to use both with Courier New as the preferred alternative.
Georgia serif
Times New Roman serif Some OSes have an alternative (possibly older) version of the Times New Roman font called Times. It’s considered best practice to use both with Times New Roman as the preferred alternative.
Trebuchet MS sans-serif You should be careful with using this font — it isn’t widely available on mobile OSes.
Verdana sans-serif

Примечание: Among various resources, the cssfontstack.com website maintains a list of web safe fonts available on Windows and macOS operating systems, which can help you make your decision about what you consider safe for your usage.

Примечание: There is a way to download a custom font along with a webpage, to allow you to customize your font usage in any way you want: web fonts. This is a little bit more complex, and we will be discussing this in a separate article later on in the module.

Default fonts

CSS defines five generic names for fonts: serif, sans-serif, monospace, cursive and fantasy. Those are very generic and the exact font face used when using those generic names is up to each browser and can vary for each operating system they are running on. It represents a worst case scenario where the browser will try to do its best to provide at least a font that looks appropriate. serif, sans-serif and monospace are quite predictable and should provide something reasonable. On the other hand, cursive and fantasy are less predictable and we recommend using them very carefully, testing as you go.

The five names are defined as follows:

Term Definition Example
serif Fonts that have serifs (the flourishes and other small details you see at the ends of the strokes in some typefaces) My big red elephant
sans-serif Fonts that don’t have serifs. My big red elephant
monospace Fonts where every character has the same width, typically used in code listings. My big red elephant
cursive Fonts that are intended to emulate handwriting, with flowing, connected strokes. My big red elephant
fantasy Fonts that are intended to be decorative. My big red elephant

Font stacks

Since you can’t guarantee the availability of the fonts you want to use on your webpages (even a web font could fail for some reason), you can supply a font stack so that the browser has multiple fonts it can choose from. This simply involves a font-family value consisting of multiple font names separated by commas, e.g.

p {
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

In such a case, the browser starts at the beginning of the list and looks to see if that font is available on the machine. If it is, it applies that font to the selected elements. If not, it moves on to the next font, and so on.

It is a good idea to provide a suitable generic font name at the end of the stack so that if none of the listed fonts are available, the browser can at least provide something approximately suitable. To emphasise this point, paragraphs are given the browser’s default serif font if no other option is available — which is usually Times New Roman — this is no good for a sans-serif font!

Примечание: Font names that have more than one word — like Trebuchet MS — need to be surrounded by quotes, for example "Trebuchet MS".

A font-family example

Let’s add to our previous example, giving the paragraphs a sans-serif font:

p {
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}

This gives us the following result:

<h1>Tommy the cat</h1>

<p>Well I remember it as though it were a meal ago...</p>

<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
 may have nestled its way into his mighty throat. Many a fat alley rat
had met its demise while staring point blank down the cavernous barrel of
 this awesome prowling machine. Truly a wonder of nature this urban
predator — Tommy the cat had many a story to tell. But it was a rare
occasion such as this that he did.</p>

Font size

In our previous module’s CSS values and units article, we reviewed length and size units. Font size (set with the font-size property) can take values measured in most of these units (and others, such as percentages), however the most common units you’ll use to size text are:

  • px (pixels): The number of pixels high you want the text to be. This is an absolute unit — it results in the same final computed value for the font on the page in pretty much any situation.
  • ems: 1 em is equal to the font size set on the parent element of the current element we are styling (more specifically, the width of a capital letter M contained inside the parent element.) This can become tricky to work out if you have a lot of nested elements with different font sizes set, but it is doable, as you’ll see below. Why bother? It is quite natural once you get used to it, and you can use em to size everything, not just text. You can have an entire website sized using em, which makes maintenance easy.
  • rems: These work just like em, except that 1 rem is equal to the font size set on the root element of the document (i.e. <html>), not the parent element. This makes doing the maths to work out your font sizes much easier, although if you want to support really old browsers, you might struggle — rem is not supported in Internet Explorer 8 and below.

The font-size of an element is inherited from that element’s parent element. This all starts with the root element of the entire document — <html> — the font-size of which is set to 16px as standard across browsers. Any paragraph (or another element that doesn’t have a different size set by the browser) inside the root element will have a final size of 16 px. Other elements may have different default sizes, for example an <h1> (en-US) element has a size of 2 em set by default, so it will have a final size of 32 px.

Things become more tricky when you start altering the font size of nested elements. For example, if you had an <article> element in your page, and set its font-size to 1.5 em (which would compute to 24 px final size), and then wanted the paragraphs inside the <article> elements to have a computed font size of 20 px, what em value would you use?

<!-- document base font-size is 16px -->
<article> <!-- If my font-size is 1.5em -->
  <p>My paragraph</p> <!-- How do I compute to 20px font-size? -->
</article>

You would need to set its em value to 20/24, or 0.83333333 em. The maths can be complicated, so you need to be careful about how you style things. It is best to use rem where you can, to keep things simple, and avoid setting the font-size of container elements where possible.

A simple sizing example

When sizing your text, it is usually a good idea to set the base font-size of the document to 10 px, so that then the maths is a lot easier to work out — required (r)em values are then the pixel font size divided by 10, not 16. After doing that, you can easily size the different types of text in your document to what you want. It is a good idea to list all your font-size rulesets in a designated area in your stylesheet, so they are easy to find.

Our new result is like so:

<h1>Tommy the cat</h1>

<p>Well I remember it as though it were a meal ago...</p>

<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
 may have nestled its way into his mighty throat. Many a fat alley rat
had met its demise while staring point blank down the cavernous barrel of
 this awesome prowling machine. Truly a wonder of nature this urban
predator — Tommy the cat had many a story to tell. But it was a rare
occasion such as this that he did.</p>

html {
  font-size: 10px;
}

h1 {
  font-size: 5rem;
}

p {
  font-size: 1.5rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}

Font style, font weight, text transform, and text decoration

CSS provides four common properties to alter the visual weight/emphasis of text:

  • font-style: Used to turn italic text on and off. Possible values are as follows (you’ll rarely use this, unless you want to turn some italic styling off for some reason):
    • normal: Sets the text to the normal font (turns existing italics off.)
    • italic: Sets the text to use the italic version of the font if available; if not available, it will simulate italics with oblique instead.
    • oblique: Sets the text to use a simulated version of an italic font, created by slanting the normal version.
  • font-weight: Sets how bold the text is. This has many values available in case you have many font variants available (such as -light, -normal, -bold, -extrabold, -black, etc.), but realistically you’ll rarely use any of them except for normal and bold:
    • normal, bold: Normal and bold font weight
    • lighter, bolder: Sets the current element’s boldness to be one step lighter or heavier than its parent element’s boldness.
    • 100–900: Numeric boldness values that provide finer grained control than the above keywords, if needed.
  • text-transform (en-US): Allows you to set your font to be transformed. Values include:
    • none: Prevents any transformation.
    • uppercase: Transforms all text to capitals.
    • lowercase: Transforms all text to lower case.
    • capitalize: Transforms all words to have the first letter capitalized.
    • full-width: Transforms all glyphs to be written inside a fixed-width square, similar to a monospace font, allowing aligning of e.g. Latin characters along with Asian language glyphs (like Chinese, Japanese, Korean).
  • text-decoration (en-US): Sets/unsets text decorations on fonts (you’ll mainly use this to unset the default underline on links when styling them.) Available values are:
    • none: Unsets any text decorations already present.
    • underline: Underlines the text.
    • overline: Gives the text an overline.
    • line-through: Puts a strikethrough over the text.

    You should note that text-decoration (en-US) can accept multiple values at once, if you want to add multiple decorations simultaneously, for example text-decoration: underline overline. Also note that text-decoration (en-US) is a shorthand property for text-decoration-line (en-US), text-decoration-style (en-US), and text-decoration-color (en-US). You can use combinations of these property values to create interesting effects, for example text-decoration: line-through red wavy.

Let’s look at adding a couple of these properties to our example:

Our new result is like so:

<h1>Tommy the cat</h1>

<p>Well I remember it as though it were a meal ago...</p>

<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
 may have nestled its way into his mighty throat. Many a fat alley rat
had met its demise while staring point blank down the cavernous barrel of
 this awesome prowling machine. Truly a wonder of nature this urban
predator — Tommy the cat had many a story to tell. But it was a rare
occasion such as this that he did.</p>

html {
  font-size: 10px;
}

h1 {
  font-size: 5rem;
  text-transform: capitalize;
}

h1 + p {
  font-weight: bold;
}

p {
  font-size: 1.5rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}

Text drop shadows

You can apply drop shadows to your text using the text-shadow property. This takes up to four values, as shown in the example below:

text-shadow: 4px 4px 5px red;

The four properties are as follows:

  1. The horizontal offset of the shadow from the original text — this can take most available CSS length and size units, but you’ll most commonly use px; positive values move the shadow right, and negative values left. This value has to be included.
  2. The vertical offset of the shadow from the original text; behaves basically just like the horizontal offset, except that it moves the shadow up/down, not left/right. This value has to be included.
  3. The blur radius — a higher value means the shadow is dispersed more widely. If this value is not included, it defaults to 0, which means no blur. This can take most available CSS length and size units.
  4. The base color of the shadow, which can take any CSS color unit. If not included, it defaults to black.

Multiple shadows

You can apply multiple shadows to the same text by including multiple shadow values separated by commas, for example:

text-shadow: 1px 1px 1px red,
             2px 2px 1px red;

If we applied this to the <h1> (en-US) element in our Tommy the cat example, we’d end up with this:

<h1>Tommy the cat</h1>

<p>Well I remember it as though it were a meal ago...</p>

<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
 may have nestled its way into his mighty throat. Many a fat alley rat
had met its demise while staring point blank down the cavernous barrel of
 this awesome prowling machine. Truly a wonder of nature this urban
predator — Tommy the cat had many a story to tell. But it was a rare
occasion such as this that he did.</p>

html {
  font-size: 10px;
}

h1 {
  font-size: 5rem;
  text-transform: capitalize;
  text-shadow: 1px 1px 1px red,
               2px 2px 1px red;
}

h1 + p {
  font-weight: bold;
}

p {
  font-size: 1.5rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}

Text layout

With basic font properties out the way, let’s now have a look at properties we can use to affect text layout.

Text alignment

The text-align property is used to control how text is aligned within its containing content box. The available values are as follows, and work in pretty much the same way as they do in a regular word processor application:

  • left: Left-justifies the text.
  • right: Right-justifies the text.
  • center: Centers the text.
  • justify: Makes the text spread out, varying the gaps in between the words so that all lines of text are the same width. You need to use this carefully — it can look terrible, especially when applied to a paragraph with lots of long words in it. If you are going to use this, you should also think about using something else along with it, such as hyphens, to break some of the longer words across lines.

If we applied text-align: center; to the <h1> (en-US) in our example, we’d end up with this:

<h1>Tommy the cat</h1>

<p>Well I remember it as though it were a meal ago...</p>

<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
 may have nestled its way into his mighty throat. Many a fat alley rat
had met its demise while staring point blank down the cavernous barrel of
 this awesome prowling machine. Truly a wonder of nature this urban
predator — Tommy the cat had many a story to tell. But it was a rare
occasion such as this that he did.</p>

html {
  font-size: 10px;
}

h1 {
  font-size: 5rem;
  text-transform: capitalize;
  text-shadow: 1px 1px 1px red,
               2px 2px 1px red;
  text-align: center;
}

h1 + p {
  font-weight: bold;
}

p {
  font-size: 1.5rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}

Line height

The line-height property sets the height of each line of text — this can take most length and size units, but can also take a unitless value, which acts as a multiplier and is generally considered the best option — the font-size is multiplied to get the line-height. Body text generally looks nicer and is easier to read when the lines are spaced apart; the recommended line height is around 1.5 – 2 (double spaced.) So to set our lines of text to 1.6 times the height of the font, you’d use this:

Applying this to the <p> elements in our example would give us this result:

<h1>Tommy the cat</h1>

<p>Well I remember it as though it were a meal ago...</p>

<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
 may have nestled its way into his mighty throat. Many a fat alley rat
had met its demise while staring point blank down the cavernous barrel of
 this awesome prowling machine. Truly a wonder of nature this urban
predator — Tommy the cat had many a story to tell. But it was a rare
occasion such as this that he did.</p>

html {
  font-size: 10px;
}

h1 {
  font-size: 5rem;
  text-transform: capitalize;
  text-shadow: 1px 1px 1px red,
               2px 2px 1px red;
  text-align: center;
}

h1 + p {
  font-weight: bold;
}

p {
  font-size: 1.5rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.6;
}

Letter and word spacing

The letter-spacing and word-spacing properties allow you to set the spacing between letters and words in your text. You won’t use these very often, but might find a use for them to get a certain look, or to improve the legibility of a particularly dense font. They can take most length and size units.

So as an example, we could apply some word- and letter-spacing to the first line of each <p> element in our example:

p::first-line {
  letter-spacing: 4px;
  word-spacing: 4px;
}

Let’s add some to our example, like so:

<h1>Tommy the cat</h1>

<p>Well I remember it as though it were a meal ago...</p>

<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
 may have nestled its way into his mighty throat. Many a fat alley rat
had met its demise while staring point blank down the cavernous barrel of
 this awesome prowling machine. Truly a wonder of nature this urban
predator — Tommy the cat had many a story to tell. But it was a rare
occasion such as this that he did.</p>

html {
  font-size: 10px;
}

h1 {
  font-size: 5rem;
  text-transform: capitalize;
  text-shadow: 1px 1px 1px red,
               2px 2px 1px red;
  text-align: center;
  letter-spacing: 2px;
}

h1 + p {
  font-weight: bold;
}

p::first-line {
  letter-spacing: 4px;
  word-spacing: 4px;
}

p {
  font-size: 1.5rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.6;
  letter-spacing: 1px;
}

Other properties worth looking at

The above properties give you an idea of how to start styling text on a webpage, but there are many more properties you could use. We just wanted to cover the most important ones here. Once you’ve become used to using the above, you should also explore the following:

Font styles:

  • font-variant (en-US): Switch between small caps and normal font alternatives.
  • font-kerning (en-US): Switch font kerning options on and off.
  • font-feature-settings (en-US): Switch various OpenType font features on and off.
  • font-variant-alternates (en-US): Control the use of alternate glyphs for a given font-face.
  • font-variant-caps (en-US): Control the use of alternate capital glyphs.
  • font-variant-east-asian (en-US): Control the usage of alternate glyphs for East Asian scripts, like Japanese and Chinese.
  • font-variant-ligatures: Control which ligatures and contextual forms are used in text.
  • font-variant-numeric: Control the usage of alternate glyphs for numbers, fractions, and ordinal markers.
  • font-variant-position (en-US): Control the usage of alternate glyphs of smaller sizes positioned as superscript or subscript.
  • font-size-adjust (en-US): Adjust the visual size of the font independently of its actual font size.
  • font-stretch (en-US): Switch between possible alternative stretched versions of a given font.
  • text-underline-position (en-US): Specify the position of underlines set using the text-decoration-line property underline value.
  • text-rendering (en-US): Try to perform some text rendering optimization.

Text layout styles:

  • text-indent: Specify how much horizontal space should be left before the beginning of the first line of the text content.
  • text-overflow (en-US): Define how overflowed content that is not displayed is signaled to users.
  • white-space: Define how whitespace and associated line breaks inside the element are handled.
  • word-break: Specify whether to break lines within words.
  • direction: Define the text direction (This depends on the language and usually it’s better to let HTML handle that part as it is tied to the text content.)
  • hyphens: Switch on and off hyphenation for supported languages.
  • line-break: Relax or strengthen line breaking for Asian languages.
  • text-align-last: Define how the last line of a block or a line, right before a forced line break, is aligned.
  • text-orientation (en-US): Define the orientation of the text in a line.
  • overflow-wrap: Specify whether or not the browser may break lines within words in order to prevent overflow.
  • writing-mode: Define whether lines of text are laid out horizontally or vertically and the direction in which subsequent lines flow.

Font shorthand

Many font properties can also be set through the shorthand property font. These are written in the following order: font-style, font-variant (en-US), font-weight, font-stretch (en-US), font-size, line-height, and font-family.

Among all those properties, only font-size and font-family are required when using the font shorthand property.

A forward slash has to be put in between the font-size and line-height properties.

A full example would look like this:

font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;

Active learning: Playing with styling text

In this active learning session, we don’t have any specific exercises for you to do: we’d just like you to have a good play with some font/text layout properties, and see what you can produce! You can either do this using offline HTML/CSS files, or enter your code into the live editable example below.

If you make a mistake, you can always reset it using the Reset button.

<div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
  <h2>HTML Input</h2>
  <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">
<p>Some sample text for your delight</p>
  </textarea>

  <h2>CSS Input</h2>
  <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">
p {

}
</textarea>

  <h2>Output</h2>
  <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div>
  <div class="controls">
    <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;">
  </div>
</div>

const htmlInput = document.querySelector(".html-input");
const cssInput = document.querySelector(".css-input");
const reset = document.getElementById("reset");
let htmlCode = htmlInput.value;
let cssCode = cssInput.value;
const output = document.querySelector(".output");

const styleElem = document.createElement('style');
const headElem = document.querySelector('head');
headElem.appendChild(styleElem);

function drawOutput() {
  output.innerHTML = htmlInput.value;
  styleElem.textContent = cssInput.value;
}

reset.addEventListener("click", function() {
  htmlInput.value = htmlCode;
  cssInput.value = cssCode;
  drawOutput();
});

htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);

Test your skills!

You’ve reached the end of this article, and already did some skill testing in our Active Learning section, but can you remember the most important information going forward? You can find an assessment to verify that you’ve retained this information at the end of the module — see Typesetting a community school homepage.

This assessment tests all the knowledge discussed in this module, so you might want to read the other articles before moving on to it.

Summary

We hoped you enjoyed playing with text in this article! The next article will give you all you need to know about styling HTML lists.

  • Обзор: Styling text
  • Далее

In this module

Источник

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

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

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

Гарнитура и шрифт

Термины «гарнитура» и «шрифт» часто взаимозаменяемы, что приводит к путанице. Вот что означает каждый термин.

Гарнитура это то, что мы видим. Это художественное впечатление от того, как текст выглядит, воспринимается и читается.

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

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

Добавление цвета к тексту

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

Единственное свойство, которое нам требуется для установки цвета текста — это свойство color. Оно принимает одно значение цвета, но в разных форматах. Эти форматы, как мы обсуждали в уроке 3, «Знакомство с CSS», включают ключевые слова, шестнадцатеричные значения и значения RGB, RGBa, HSL и HSLa. Шестнадцатеричные значения являются наиболее распространёнными, поскольку они обеспечивают максимальный контроль с минимальными усилиями.

Давайте взглянем на CSS, необходимый для изменения цвета всего текста в пределах элемента <html> на странице:

html {
  color: #555;
}

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

CSS предлагает много разных свойств для редактирования внешнего вида текста на странице. Эти свойства входят в две категории: свойства шрифта и свойства текста. Большинство из этих свойств начинаются с font- или text-. Для начала мы обсудим основные свойства шрифта.

font-family

Свойство font-family применяется, чтобы объявить, какой шрифт, а также какие резервные или заменяющие шрифты должны быть использованы для отображения текста. Значение font-family содержит несколько имён шрифтов, перечисляемых через запятую.

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

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

Свойство font-family в действии выглядит так:

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

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

font-size

Свойство font-size даёт возможность установить размер текста, используя типовые значения размера, включая пиксели, em, проценты, пункты или ключевые слова.

Здесь в CSS устанавливается размер шрифта 14 пикселей для элемента <body>:

body {
  font-size: 14px;
}

font-style

Чтобы сделать текст курсивным или предотвратить его от этого, мы будем использовать свойство font-style. Это свойство принимает четыре ключевых слова: normal, italic, oblique и inherit. Из них наиболее часто используются italic (задаёт текст курсивным) и normal (возвращает текст к своему обычному стилю).

Ниже CSS устанавливает для всех элементов с классом special свойство font-style как italic: 

.special {
  font-style: italic;
}

font-variant

Это происходит не часто, но иногда текст необходимо установить небольшими заглавными буквами, также известными как капитель. Для такого особого случая мы воспользуемся свойством font-variant. Оно принимает три значения: normal, small-caps и inherit. Наиболее типовыми значениями являются normal и small-caps, которые используются для переключения шрифтов между капителью и обычным текстом.

Для переключения всех элементов с классом firm, мы будем использовать font-variant со значением small-caps:

.firm {
  font-variant: small-caps;
}

font-weight

Иногда мы хотим сделать текст жирным или изменить насыщенность гарнитуры. В таких случаях мы будем использовать свойство font-weight. Оно принимает в качестве значения ключевое слово или число.

Ключевое слово включает normal, bold, bolder, lighter и inherit. Из этих ключевых слов рекомендуется в первую очередь задействовать normal и bold, чтобы изменить текст от обычного до жирного и наоборот. Вместо использования ключевых слов bolder или lighter лучше применять числовое значение для более точного управления.

На практике, вот CSS для установки font-weight как bold для любого элемента с классом daring:

.daring {
  font-weight: bold;
}

Числовые значения 100, 200, 300, 400, 500, 600, 700, 800 и 900 связаны с гарнитурами шрифтов, которые имеют несколько жирностей. Их порядок начинается с самой тонкой жирности, 100, и повышается до самой толстой жирности, 900. Для справки, значение normal соответствует 400, а значение bold соответствует 700. Таким образом, любое числовое значение ниже 400 будет достаточно тонким, а любое значение выше 700 будет достаточно жирным.

Изменение насыщенности шрифта до 600 для любого элемента с классом daring теперь отображает текст как полужирный — не совсем жирный, как ключевое слово bold до этого:

.daring {
  font-weight: 600;
}

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

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

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

line-height

Межстрочный интервал — расстояние между двумя строками текста — объявляется с помощью свойства line-height. Оно принимает все основные значения размера, которые мы рассмотрели в уроке 3, «Знакомство с CSS».

Лучше всего для читаемости задать межстрочный интервал примерно в полтора раза больше значения свойства font-size. Это можно быстро получить путём установки line-height как 150% или просто 1.5. Однако если мы работаем с базовой сеткой, предпочтительнее использовать пиксели и получить немного больше контроля над line-height.

Взгляните на CSS, мы установили line-height как 22 пикселя для элемента <body>, тем самым задав 22 пикселя между каждой строкой текста:

body {
  line-height: 22px;
}

Межстрочный интервал также может быть использован для вертикального выравнивания по центру одной строки текста внутри элемента. Используя одинаковые значения свойств line-height и height вы выровняете текст по центру вертикали:

.btn {
  height: 22px;
  line-height: 22px;
}

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

Универсальное свойство font

Все перечисленные выше шрифтовые свойства могут быть объединены в одном универсальном свойстве font. Это свойство может принимать несколько значений шрифтовых свойств. Порядок значений этих свойств должен быть следующим, слева направо: font-style, font-variant, font-weight, font-size, line-height и font-family.

Эти значения перечисляются слева направо без применения запятых (кроме названий шрифтов, поскольку свойство font-family задействует запятые). Косая черта (/) необходима для разделения значений свойств font-size и line-height.

Каждое значение свойства не является обязательным, за исключением значений font-size и font-family. Иными словами, мы можем включить только значения свойств font-size и font-family при желании.

html {
  font: italic small-caps bold 14px/22px "Helvetica Neue", Helvetica, Arial, sans-serif;
}

Свойства шрифта все разом

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

HTML

<h2><a href="#">Я разработчик</a></h2>

<p class="byline">Опубликовано: Шэй Хоу</p>

<p>Каждый день я вижу дизайнеров и программистов работающих совместно друг с другом. 
Они работают разумно, преследуя бизнес-цели. Они работают старательно, делая 
исключительные продукты. Они решают реальные проблемы и гордятся своей работой. 
Они разработчики. <a href="#">Продолжить…</a></p>

CSS

h2,
p {
  color: #555;
  font: 13px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a {
  color: #0087cc;
}
a:hover {
  color: #ff7b29;
}
h2 {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 6px;
}
.byline {
  color: #9799a7;
  font-family: Georgia, Times, "Times New Roman", serif;
  font-style: italic;
  margin-bottom: 18px;
}

Демонстрация свойств шрифта

Псевдоклассы в CSS

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

Псевдокласс :hover задаёт стиль элемента, когда пользователь проводит курсор мыши над этим элементом. При использовании с элементом <a>, как показано выше, все элементы <a> получают уникальные стили, когда на них наводят курсор. Теперь наши элементы <a> изменят цвет в этот момент.

На практике

Вернёмся назад к нашему сайту Styles Conference и начнём добавлять некоторые свойства шрифта.

  1. Мы начнём с обновления шрифта для всего нашего текста. Чтобы сделать это, мы применим стили к элементу <body>. Начнём с color, а также добавим значения font-weight, font-size, line-height и font-family через свойство font.

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

    Нам нужно добавить следующее:

    /*
  ========================================
  Пользовательские стили
  ========================================
*/
body {
  color: #888;
  font: 300 16px/22px "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

  2. В уроке 4, «Открываем блочную модель», мы начали добавлять некоторые типографские стили, в частности, нижний margin для некоторых заголовков разного уровня и абзацев. В этом же разделе файла main.css давайте добавим цвет к заголовкам от первого до четвёртого уровней.

    h1, h2, h3, h4 {
  color: #648880;
}

    Пока мы здесь, добавим также размер шрифта для этих заголовков. Наши элементы <h1> и <h2> будут использовать достаточно большие значения font-size, следовательно, мы также хотим увеличить у них значения line-height, чтобы сохранить текст внутри этих элементов разборчивым. Для справки, мы установим значение line-height как 44 пикселя, удвоив значение основного line-height, установленного в правилах для элемента <body>.

    h1 {
  font-size: 36px;
  line-height: 44px;
}
h2 {
  font-size: 24px;
  line-height: 44px;
}
h3 {
  font-size: 21px;
}
h4 {
  font-size: 18px;
}

  3. Наши элементы <h5> планируются чуть более уникальными, чем остальные заголовки. Соответственно, мы собираемся немного изменить их стили.

    Мы применим другое значение свойства color и немного уменьшим font-size для этих элементов, а также собираемся изменить font-weight на 400 или normal.

    По умолчанию, браузеры отображают заголовки с font-weight как bold. Для наших заголовков, однако, в данный момент все font-weight заданы как 300. Сброс CSS в верхней части файла main.css изменил font-weight на normal, а затем font-weight внутри элемента <body> задал значение 300 для всех заголовков.

    Значение font-weight как 400 для элемента <h5> на самом деле сделает это немного толще, чем остальные заголовки и текст.

    h5 {
  color: #a9b2b9;
  font-size: 14px;
  font-weight: 400;
}

  4. Наш сброс в начале стилей также сбросит стили браузера по умолчанию для элементов <strong>, <cite> и <em>, которые мы хотим добавить обратно. Для элементов <strong> мы хотим установить font-weight как 400, который на самом деле приравнивается к normal, а не bold, поскольку используемая нами гарнитура толще, чем большинство других гарнитур. Затем для элементов <cite> и <em> мы хотим установить font-style как italic.

    strong {
  font-weight: 400;
}
cite, em {
  font-style: italic;
}

  5. У нас всё получается, так что давайте продолжать, добавляя некоторые стили для наших ссылок. В данный момент они синие, так указал браузер по умолчанию. Сделаем их того же цвета, что наши заголовки от <h1> до <h4>. Кроме того, применим псевдокласс :hover, чтобы изменить цвет на светло-серый, когда пользователь наводит курсор на ссылку.

    /*
  ========================================
  Ссылки
  ========================================
*/

a:hover {
  color: #a9b2b9;
}
a {
  color: #648880;
}

  6. Теперь взглянем на наш элемент <header> и обновим для него наши стили. Мы начнём обновление с логотипа, добавив свойства font-size и line-height в наборе правил для logo. После добавления к существующим свойствам border-top, float и padding, новый набор правил должен выглядеть так:

    .logo {
  border-top: 4px solid #648880;
  float: left;
  font-size: 48px;
  line-height: 44px;
  padding: 40px 0 22px 0;
}

  7. Поскольку мы совсем немного увеличили ширину логотипа, добавим margin к элементу <h3> внутри <header>, чтобы сбалансировать это. Мы сделаем это путём размещения значения tagline у атрибута class для элемента <h3>, а затем используя этот класс в нашем CSS, чтобы применить соответствующие поля.

    Не забывайте, что изменения в элементе <h3> должны произойти на каждой странице.

    HTML

    <h3 class="tagline">24&ndash;26 августа &mdash; Чикаго, штат Иллинойс</h3>

    CSS

    .tagline {
  margin: 66px 0 22px 0;
}

  8. После элемента <h3> с классом tagline наступает очередь элемента <nav>. Добавим значение primary-nav к атрибуту class элемента <nav>, а также свойства font-size и font-weight, чтобы навигация выделялась по сравнению с остальной частью заголовка.

    HTML

    <nav class="primary-nav">
  ...
</nav>

    CSS

    .primary-nav {
  font-size: 14px;
  font-weight: 400;
}

  9. Теперь элемент <header> в несколько лучшей форме, давайте также взглянем на наш элемент <footer>. Используя класс primary-footer изменим color и font-size для всего текста внутри <footer>. Кроме того, поднимем font-weight для <small> до 400.

    Учитывая существующие стили, стиль для нашего подвала должен выглядеть так:

    .primary-footer {
  color: #648880;
  font-size: 14px;
  padding-bottom: 44px;
  padding-top: 44px;
}
.primary-footer small {
  float: left;
  font-weight: 400;
}

  10. Также обновим немного нашу главную страницу. Начнём с раздела hero и увеличим общий line-height в разделе до 44 пикселей. Мы также сделаем текст в этом разделе больше, увеличив font-size для элемента <h2> до 36 пикселей и font-size для элемента <p> до 24 пикселей.

    Мы можем внести все эти изменения, используя существующий класс hero и создав новые селекторы для элементов <h2> и <p>. Наши стили для раздела hero переделаются теперь таким образом:

    .hero {
  line-height: 44px;
  padding: 22px 80px 66px 80px;
}
.hero h2 {
  font-size: 36px;
}
.hero p {
  font-size: 24px;
}

  11. В завершении, у нас есть небольшая проблемка, которую надо исправить на главной странице. Ранее мы задали для всех ссылок светло-серый цвет при наведении на них. Это прекрасно работает, за исключением трёх тизеров на главной странице, где ссылка охватывает оба элемента <h3> и <h5>. Поскольку у этих элементов есть своё собственное определение color, псевдокласс :hover, описанный ранее, не оказывает на них влияние.

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

    <section class="grid">

  <!-- Спикеры -->
  <section class="teaser col-1-3">
    <a href="speakers.html">
      <h5>Спикеры</h5>
      <h3>Спикеры мирового класса</h3>
    </a>
    <p>К нам приедут более двадцати фантастических спикеров со всего мира, чтобы поделиться своими историями.</p>
  </section>

  ... 
</section>

    С классом teaser мы готовы несколько утяжелить CSS и создать достаточно сложный селектор. Начнём наш селектор с этого класса, поскольку мы хотим только нацелиться на элементы внутри элемента с классом teaser. Отсюда мы хотим применить стили к элементам, которые находятся внутри ссылок и на которые навели курсор мыши. Таким образом, мы добавим селектор типа совместно с псевдоклассом :hover. Наконец, мы добавим селектор типа h3, чтобы выбрать действительные элементы <h3>, к которым мы хотели бы применить стили.

    В общей сложности, наш селектор и стили для этих элементов <h3> будут выглядеть следующим образом:

    .teaser a:hover h3 {
  color: #a9b2b9;
}

Уфф, это было немного. Хорошая новость — наша страница Styles Conference начинает выглядеть действительно приятно и показывает немного индивидуальности.

Наш сайт Styles Conference получил немного любви от горстки шрифтовых свойств

Рис. 6.01. Наш сайт Styles Conference получил немного любви от горстки шрифтовых свойств

Применение текстовых свойств

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

text-align

Выравнивание текста является важной частью построения ритма и потока на странице. Мы делаем это с помощью свойства text-align. У этого свойства пять значений: left, right, center, justify и inherit. Все эти значения довольно просты; как и ожидалось, они выравнивают текст по левому краю, правому краю, по центру или по ширине.

Ниже CSS устанавливает текст всех абзацев выровненный по центру:

p {
  text-align: center;
}

Свойство text-align, однако, не следует путать со свойством float. Значения text-align как left или right выравнивают текст внутри элемента влево или вправо, в то время как значения float как left или right двигают весь элемент. Иногда свойство text-align даст нам желаемый результат, в другой раз нам, возможно, потребуется использовать свойство float.

text-decoration

Свойство text-decoration предлагает несколько способов для украшения текста. Оно принимает в качестве значений ключевые слова none, underline, overline, line-through и inherit. Использование text-decoration варьируется, но самое популярное применение — это подчёркивание ссылок, что является стилем браузера по умолчанию.

Здесь стиль для любого элемента с классом note задаёт text-decoration как underline:

.note {
  text-decoration: underline;
}

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

text-indent

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

Здесь CSS меняет отступ текста для всех элементов <p> внутрь на 20 пикселей:

p {
  text-indent: 20px;
}

text-shadow

Свойство text-shadow позволяет нам добавить тень или несколько теней к тексту. Свойство обычно принимает четыре значения, все они перечисляются друг за другом слева направо. Первые три значения — это размер, а последнее значение — цвет.

В трёх значениях размера первое значение определяет горизонтальное смещение тени, второе значение определяет вертикальное смещение тени, а третье определяет радиус размытия тени. Четвертое и последнее значение — это цвет тени, который может быть любым значением применяемым в свойстве color.

Здесь для всего текста элемента <p> свойство text-shadow задаёт на 30% прозрачную чёрную тень, сдвинутую на 3 пикселя вправо, на 6 пикселей вниз и с размытием 2 пикселя:

p {
  text-shadow: 3px 6px 2px rgba(0, 0, 0, .3);
}

Использование отрицательных значений размера для горизонтальных и вертикальных смещений позволяет перемещать тени влево и вверх.

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

box-shadow

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

Свойство box-shadow работает так же, как text-shadow, принимая значения для горизонтальных и вертикальных смещений, размытие и цвет.

box-shadow также принимает необязательное четвёртое значение размера, перед значением цвета, для растяжения тени. Положительное значение растяжения расширит тень больше, чем размер элемента, к которому применяется свойство, а отрицательное значение сократит тень меньше, чем размер самого элемента.

Наконец, свойство box-shadow может включать впереди необязательное значение inset для размещения тени внутри элемента, а не снаружи.

text-transform

Подобно свойству font-variant есть свойство text-transform. В то время как свойство font-variant ищет альтернативный вариант гарнитуры, свойство text-transform изменит строку текста без необходимости альтернативной гарнитуры. Свойство text-transform принимает пять значений: none, capitalize, uppercase, lowercase и inherit.

Значение capitalize делает заглавной первую букву каждого слова, значение uppercase устанавливает заглавной каждую букву, а значение lowercase делает каждую букву строчной. С помощью none любые из этих унаследованных значений вернутся к исходному стилю текста.

Ниже CSS устанавливает текст для всех элементов <р> заглавными буквами:

p {
  text-transform: uppercase;
}

letter-spacing

Используя свойство letter-spacing мы можем регулировать (или отслеживать) расстояние между букв на странице. Положительное значение будет толкать буквы дальше друг от друга, а отрицательное значение будет тянуть буквы ближе друг к другу. Значение none вернёт пространство между букв к своей обычной величине.

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

Здесь с помощью CSS все буквы в пределах наших элементов <p> на .5 em станут ближе друг к другу:

p {
  letter-spacing: -.5em;
}

word-spacing

Также, подобно свойству letter-spacing мы можем отрегулировать расстояние между словами в элементе, используя свойство word-spacing. Это свойство принимает те же значения размера и ключевые слова, что и letter-spacing. Вместо расстояния между букв, свойство word-spacing применяет эти значения между словами.

Здесь каждое слово в элементе <p> будет на расстоянии .25 друг от друга.

p {
  word-spacing: .25em;
}

Свойства текста все разом

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

HTML

<h2><a href="#">Я разработчик</a></h2>

<p class="byline">Опубликовано: Шэй Хоу</p>

<p class="intro">Каждый день я вижу дизайнеров и программистов работающих совместно друг с другом. 
Они работают разумно, преследуя бизнес-цели. Они работают старательно, делая исключительные продукты. 
Они решают реальные проблемы и гордятся своей работой. Они разработчики. <a href="#">Продолжить…</a></p>

CSS

h2,
p {
  color: #555;
  font: 13px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a {
  color: #0087cc;
}
a:hover {
  color: #ff7b29;
}
h2 {
  font-size: 22px;
  font-weight: bold;
  letter-spacing: -.02em;
  margin-bottom: 6px;
}
h2 a {
  text-decoration: none;
  text-shadow: 2px 2px 1px rgba(0, 0, 0, .2);
}
.byline {
  color: #9799a7;
  font-family: Georgia, Times, "Times New Roman", serif;
  font-style: italic;
  margin-bottom: 18px;
}
.intro {
  text-indent: 15px;
}
.intro a {
  font-size: 11px;
  font-weight: bold;
  text-decoration: underline;
  text-transform: uppercase;
}

Демонстрация свойств текста

На практике

С текстовыми свойствами подмышкой, перепрыгнем обратно к нашему сайту Styles Conference и включим их в работу.

  1. В настоящий момент каждая ссылка на странице подчёркивается, что является стилем по умолчанию для ссылок. Этот стиль является временами несколько преобладающим, с другой стороны, мы собираемся его немного поменять.

    Начнём добавление к разделу с нашими ссылкам в файле main.css с удаления подчёркивания для всех ссылок через свойство text-decoration. Далее выберем все ссылки, которые появляются в абзацах, и зададим им нижнюю границу.

    Мы могли бы использовать свойство text-decoration вместо border-bottom для подчёркивания ссылок внутри каждого абзаца, однако с помощью свойства border-bottom мы получим больше контроля над внешним видом подчёркивания. Здесь, например, подчёркивание будет другого цвета, чем сам текст.

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

    a {
  color: #648880;
  text-decoration: none;
}
a:hover {
  color: #a9b2b9;
}
p a {
  border-bottom: 1px solid #dfe2e5;
}

  2. Возвращаясь к нашим элементам <h5>, у которых стиль немного отличается от остальных заголовков, установим их все в верхнем регистре с помощью свойства text-transform. Наши новые стили элементов <h5> должны выглядеть следующим образом:

    h5 {
  color: #a9b2b9;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
}

  3. Вернёмся к нашему элементу <header> и применим дополнительные стили к нашему навигационному меню (к которому мы ранее добавили класс primary-nav). После существующих свойств font-size и font-weight добавим letter-spacing и изменим наш текст на заглавный с помощью свойства text-transform.

    Наши стили для элемента <nav> с классом primary-nav теперь должны выглядеть следующим образом:

    .primary-nav {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .5px;
  text-transform: uppercase;
}

  4. Ранее для логотипа мы задали float как left внутри элемента <header>. Теперь наш слоган находится непосредственно справа от логотипа, однако, мы хотели бы, чтобы он был виден в правой части элемента <header>.

    Нам нужно добавить свойство text-align со значением right для элемента <h3> с классом tagline, чтобы получить слоган, который располагается с правой стороны.

    При добавлении к существующему свойству margin наши новые стили для элемента <h3> с классом tagline будут выглядеть следующим образом:

    .tagline {
  margin: 66px 0 22px 0;
  text-align: right;
}

  5. Нам также хотелось бы, чтобы наши навигационные меню в элементах <header> и <footer> располагались по правому краю. Поскольку оба элемента <header> и <footer> содержат дочерние обтекаемые элементы, мы можем использовать тот же подход, что проделали с нашим слоганом.

    Обтекаемые элементы внутри <header> и <footer> убираются из обычного потока страницы, и это заставляет другие элементы обтекать вокруг них. В данном конкретном случае наши навигационные меню это элементы, которые обтекают вокруг обтекаемых элементов.

    Поскольку мы применяем одни и те же стили сразу к двум навигационным меню, то дадим каждому класс nav. Наш элемент <header> будет выглядеть так:

    <header class="container group">

  <h1 class="logo">...</h1>
 
  <h3 class="tagline">...</h3>
 
  <nav class="nav primary-nav">
   ...
  </nav>
  
</header>

    А элемент <footer> будет выглядеть так:

    <footer class="primary-footer container group">

  <small>...</small>
 
  <nav class="nav">
   ...
  </nav>
  
</footer>

    Не забывайте, что изменения в наших элементах <header> и <footer> должны быть сделаны на каждой странице.

  6. С классом nav для двух навигационных меню создадим новый раздел в рамках нашего файла main.css, чтобы добавить общие стили навигации. Начнём с добавления свойства text-align со значением right к классу nav. Мы расширим эти стили позже, но это пока послужит хорошей основой.

    /*
  ========================================
  Навигация
  ========================================
*/

.nav {
  text-align: right;
}

  7. Мы уже добавили свойство text-align к нескольким разным элементам, давайте также добавим text-align со значением center к набору правил с классом hero. Для справки, эти стили, в том числе содержащие свойства line-height и padding, находятся в разделе главной страницы нашего файла main.css.

    .hero {
  line-height: 44px;
  padding: 22px 80px 66px 80px;
  text-align: center;
}

У Styles Conference теперь серьёзный стиль (плохая шутка, извините). Если серьёзно, то все наши стили вместе сочетаются очень хорошо и сайт прогрессирует.

Наш сайт Styles Conference продвигается довольно хорошо после добавления нескольких текстовых свойств

Рис. 6.02. Наш сайт Styles Conference продвигается довольно хорошо после добавления нескольких текстовых свойств

Использование безопасных веб-шрифтов

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

  • Arial
  • Courier New, Courier
  • Garamond
  • Georgia
  • Lucida Sans, Lucida Grande, Lucida
  • Palatino Linotype
  • Tahoma
  • Times New Roman, Times
  • Trebuchet
  • Verdana

Встраивание веб-шрифтов

У нас также есть возможность загружать шрифты с сервера и включать их на сайт через стилевое правило @font-face. Эта возможность делает чудеса для сетевой типографики. Сейчас, более чем когда-либо, типографика приходит в жизнь в Интернете.

Встраивание собственных веб-шрифтов выглядит как приведённый CSS. Сперва мы используем правило @font-face, чтобы определить имя нашего шрифта через свойство font-family, а также исходник нашего шрифта (путь к файлу, содержащему наш выбранный шрифт) через свойство src. Отсюда мы можем использовать этот шрифт, включая его имя в качестве значения свойства font-family.

@font-face {
  font-family: "Lobster";
  src: local("Lobster"), url("lobster.woff") format("woff");
}
body {
  font-family: "Lobster", "Comic Sans", cursive;
}

Демонстрация свойств текста

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

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

На практике

Чтобы добавить немного характера к нашему сайту Styles Conference, попробуем использовать на нём Google Font.

  1. Зайдём на сайт Google Fonts и поищем шрифт, который мы хотели бы использовать: Roboto. После того как нашли, добавим его к нашей коллекции, следуя инструкциям на сайте.

    Когда придёт время выбора, какое начертание мы хотели бы использовать, удостоверимся, что указали 300 и 400, как мы уже применяли в нашем CSS. Также добавим 100 к коллекции для другого варианта тоже.

    Google выдаст нам дополнительный элемент <link> для включения в <head> на всех наших страницах. Мы поместим этот новый элемент <link> непосредственно ниже нашего существующего <link>. Новый элемент будет включать в себя правильный указатель на стили Google, который в том числе включает новый файл CSS с правильным правилом @font-face, необходимым для использования шрифта Roboto.

    После добавления нового элемента <link>, наш элемент <head> будет выглядеть следующим образом:

    <head>
  <meta charset="utf-8">
  <title>Styles Conference</title>
  <link rel="stylesheet" href="assets/stylesheets/main.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,300,100&subset=cyrillic,latin">
</head>

  2. После того, как мы добавили новый элемент <link> для всех наших страниц мы готовы начать использовать шрифт Roboto. Мы сделаем это, добавив его в наш основной набор шрифтов в свойстве font внутри стиля для элемента <body>.

    Добавим Roboto в начале нашего набора шрифтов так: «Roboto», «Open Sans», «Helvetica Neue», Helvetica, Arial, sans-serif.

    Хотя Roboto это одно слово, но поскольку это встроенный веб-шрифт, то мы хотим взять его в кавычки внутри любого CSS. Наш новый стиль для элемента <body> будет выглядеть следующим образом:

    body {
  color: #888;
  font: 300 16px/22px "Roboto", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

  3. Теперь Roboto должен загрузиться и работать, что видно по всему тексту на сайте Styles Conference. Поближе взглянем на наш логотип и обновим его немного.

    Внутри набора правил с классом logo начнём с добавления свойства font-weight со значением 100, чтобы сделать текст достаточно тонким. Также используем свойство text-transform со значением uppercase, чтобы сделать все буквы заглавными и свойство letter-spacing со значением .5 пикселей, чтобы добавить немного пространства между букв внутри логотипа.

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

    .logo {
  border-top: 4px solid #648880;
  float: left;
  font-size: 48px;
  font-weight: 100;
  letter-spacing: .5px;
  line-height: 44px;
  padding: 40px 0 22px 0;
  text-transform: uppercase;
}

  4. Поскольку нам доступно значение 100 у свойства font-weight, давайте также установим абзац для раздела hero такой же насыщенности. Мы можем использовать существующий селектор чтобы сделать это и новый набор правил будет выглядеть следующим образом:

    .hero p {
  font-size: 24px;
  font-weight: 100;
}

Наш сайт Styles Conference проделал несколько довольно больших шагов в этом уроке и внешний вид сайта начинает по-настоящему блистать.

Главная страница Styles Conference после добавления веб-шрифта от Google

Рис. 6.03. Главная страница Styles Conference после добавления веб-шрифта от Google

Демонстрация и исходный код

Ниже вы можете посмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.

Просмотр сайта Styles Conference или Скачать исходный код

Добавление цитат

Тексты на сайтах иногда включает различные цитаты. Все варианты цитирования могут быть охвачены семантически в HTML с помощью элементов <cite>, <q> и <blockquote>. Из-за того, что цитаты, как правило, отличается от обычного текста по своему виду, мы обсудим их здесь, в уроке по типографике.

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

  • <cite>: применяется для указания на творческую работу, автора или ресурс;
  • <q>: применяется для коротких, встроенных цитат;
  • <blockquote>: применяется для наиболее длинных внешних цитат.

Цитата на творческую работу

Строчный элемент <cite> используется в HTML в качестве указателя на творческую работу; элемент должен включать в себя название работы, имя автора, или ссылку ведущую на работу. По умолчанию, содержимое внутри элемента <cite> отображается в браузере курсивом.

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

Вот цитата из книги Уолтера Айзексона про Стива Джобса внутри элемента <cite>. В цитате также есть гиперссылка на книгу.

<p>Книга <cite><a href="http://www.amazon.com/Steve-Jobs-Walter-Isaacson/dp/1451648537">Стив Джобс</a></cite> действительно вдохновляет.</p>

Демонстрация цитаты на творческую работу

Строчные цитаты

Довольно часто текст от автора выступает как строчная цитата в другом тексте. Для этой цели должен применяться элемент <q>. Он семантически указывает цитату на авторский текст и не должен использоваться для каких-либо других целей.

По умолчанию браузер вставит соответствующие кавычки и даже изменит их вид, основываясь на языке, указанном в глобальном атрибуте lang.

Вот пример:

<p>Стив Джобс однажды сказал: <q>Один хоум-ран гораздо лучше, чем два дабла</q>.</p>

Элемент <q> включает необязательный атрибут cite. Он действует в качестве указателя на ссылку в виде URL. Этот атрибут не меняет внешний вид элемента, он просто добавляет значение для экранных читалок и других устройств. Поскольку атрибут не доступен для просмотра в браузере, также полезно предложить гиперссылку на этот источник, рядом с актуальной цитатой.

Вот пример:

<p><a href="http://www.businessweek.com/magazine/content/06_06/b3970001.htm">Стив Джобс</a> однажды сказал: 
<q cite="http://www.businessweek.com/magazine/content/06_06/b3970001.htm">Один хоум-ран гораздо лучше, чем два дабла</q>.</p>

Демонстрация строчной цитаты

Внешние цитаты

Цитируя большой блок текста, который заимствован из внешнего источника и занимает несколько строк, мы будем использовать элемент <blockquote>. Данный элемент является блочным и может содержать другие вложенные в него блочные элементы, в том числе заголовки и абзацы.

Вот пример, который использует элемент <blockquote>:

<blockquote>
  <p>В понимании большинства людей дизайн — это внешний лоск. Это украшение интерьера. 
     Это ткань штор, ткань дивана. Но для меня, всё это далеко от смысла дизайна. 
     Дизайн — это основа души человеческого творчества, что в конечном итоге выражает 
     себя в последующих внешних слоях продукта.</p>
</blockquote>

Более длинные цитаты в элементе <blockquote> могут включать в себя прямую речь. Подобные цитаты могут содержать как атрибут cite, так и элемент <cite>.

Атрибут cite может добавляться к элементу <blockquote> тем же путём, что был использован для элемента <q> ранее, чтобы указать на цитату в виде URL. Элемент <cite> может быть добавлен после самой цитаты для указания оригинального источника цитаты, если это необходимо.

Здесь в HTML излагается расширенная цитат из Стива Джобса, которая первоначально появилась в журнале Fortune. Цитата размечена с помощью элемента <blockquote> с атрибутом cite, который показывает, где цитата появилась первоначально. В элементе <blockquote> есть элемент <cite> наряду с элементом <a>, он обеспечивает дополнительное цитирование и ссылку на цитату, которая видна пользователям.

<blockquote cite="http://money.cnn.com/magazines/fortune/fortune_archive/2000/01/24/272277/index.htm">
  <p>«В понимании большинства людей дизайн — это внешний лоск. Это украшение интерьера. 
     Это ткань штор, ткань дивана. Но для меня, всё это далеко от смысла дизайна. 
     Дизайн — это основа души человеческого творчества, что в конечном итоге выражает 
     себя в последующих внешних слоях продукта.»</p>
  <p><cite>Стив Джобс в <a href="http://money.cnn.com/ magazines/fortune/fortune_archive/2000/01/24/272277/index.htm">
     журнале Fortune</a></cite></p>
</blockquote>

Демонстрация внешней цитаты

Резюме

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

Напомним быстро, что мы обсудили в этом уроке:

  • добавление цвета к нашему тексту для его улучшения;
  • применение шрифтовых свойств, в том числе font-family, font-size, font-style, font-weight и др.;
  • применение текстовых свойств, включая text-align, text-decoration, text-indent, text-shadow и др.;
  • история безопасных веб-шрифтов и как внедрить наши собственные веб-шрифты;
  • как правильно разметить цитаты.

Концентрирование на тексте и небольшое баловство с типографикой продвинуло наш дизайн довольно далеко вперёд. Дальше мы внесём в наш сайт чуть больше цвета с помощью фона и градиентов.

Ресурсы и ссылки

  • The Elements of Typographic Style Applied to the Web via Richard Rutter
  • CSS Font Shorthand Property Cheat Sheet via Impressive Webs
  • Google Fonts

См. также

Последнее изменение: 11.08.2018

Источник

Раздел:
Сайтостроение /
HTML /

План заработка в Интернете

 План заработка в Интернете

Как правильно выбрать партнерские программы, чтобы гарантированно зарабатывать? Что необходимо сделать вначале, чтобы ваш заработок был стабильным и предсказуемым? Возможно ли стартовать вообще без денег и каких-либо вложений в рекламу? Этот план поможет вам сделать первые шаги к заработку, даст ответы на важные вопросы и убережет от ошибок в начале пути.
Подробнее…

Шрифт (нем. Schrift от schreiben «писать») — это (согласно Википедии) графический рисунок начертаний букв и знаков, составляющих единую стилистическую и композиционную систему, набор символов определённого размера и рисунка.

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

Поскольку эта статья для начинающих, то мы будем использовать для изменения
шрифта тег <font>, который в HTML4 уже использовать не советуют. Однако он поддерживается всеми браузерами и, скорее всего, будет поддерживаться и дальше.

С помощью тега <font> можно изменять стиль, цвет и размер
текста. Основные атрибуты тега <font>:

  • color — устанавливает цвет текста.
  • face — изменяет шрифт в HTML (это как раз то, что нам нужно).
  • size — устанавливает размер букв.

С цветом, думаю, всё понятно. Также надеюсь, что вы помните, как использовать
атрибуты тегов. Если нет, то см. здесь.
К тому же изменять цвет текста мы уже умеем — я рассказал об этом
здесь.

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

<font face="Arial">
Для этого текста установлен шрифт Arial
<font>

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

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

<p>
<font face="MyFont, Verdana, Arial">
Для этого текста установлен шрифт MyFont
<font>
</p>

Здесь первым в списке указан шрифт MyFont,
которого, конечно же, браузер не знает. В таких случаях, если браузеру
шрифт неизвестен, он будет выводить текст шрифтом, указанным следующим
в списке. В нашем примере текст будет выведен шрифтом Verdana.
Если бы и этого шрифта в закромах браузера не оказалось, то он бы вывел
текст шрифтом Arial.

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

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

Как изменить стиль шрифта в html

Примеры отображения разных шрифтов в браузере.

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

В теге <font> это можно сделать с помощью атрибута size. Размер может быть абсолютным и относительным.

Абсолютный размер устанавливается путём передачи в атрибут непосредственного значения от 1 до 7. Например, ниже мы устанавливаем для шрифта размер 3: 

<font size="3">
Размер шрифта 3
<font>

Если установить атрибут size менее 1 или более 7, то браузер автоматически ограничит размер шрифта. Пример вы можете увидеть на рисунке ниже — несмотря на то, что мы попытались установить размер 8, браузер отобразил шрифт таким же размером, как и размер 7.

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

Примеры отображения шрифтов разных размеров в браузере.

Относительный размер устанавливается путём передачи в атрибут числа со знаком + (плюс). Например, вот такой HTML-код: 

<p>
<font size="3">
Размер шрифта 3
<font>
</p>

<p>
<font size="+2">
Размер шрифта 5 (3 + 2)
<font>
</p>

<p>
<font size="5">
Размер шрифта 5
<font>
</p>

Здесь мы сначала установили шрифт размером 3. Затем увеличили этот шрифт на 2 (то есть сделали размер шрифта равным 5). Ну а далее, чтобы убедиться, что это всё правильно работает, снова установили абсолютный размер шрифта. На рисунке ниже видно, что это действительно работает так, как и задумывалось:

Относительный размер шрифта в html

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

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

Для лучшего понимания посмотрите видео (выше) и изучите
курс о вёрстке сайтов.

Как создать свой сайт

 Как создать свой сайт

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

Помощь в технических вопросах

 Помощь в технических вопросах

Помощь студентам. Курсовые, дипломы, чертежи (КОМПАС), задачи по программированию: Pascal/Delphi/Lazarus; С/С++; Ассемблер; языки программирования ПЛК; JavaScript; VBScript; Fortran; Python; C# и др. Разработка (доработка) ПО ПЛК (предпочтение — ОВЕН, CoDeSys 2 и 3), а также программирование панелей оператора, программируемых реле и других приборов систем автоматизации.
Подробнее…
Источник

Свойства текста

С помощью CSS можно определять стиль и вид текста. Аналогично тому, что используется
тег <font>, задающий свойства шрифта, но стили обладают
большими возможностями и позволяют сократить код HTML.

Свойства шрифта

Изменение начертания шрифта и его размера происходит через свойства CSS, которые
описаны в табл. 1.

Табл. 1. Атрибуты CSS для управления шрифтами

Свойство Значение Описание Пример
font-family имя шрифта Задает список шрифтов P {font-family: Arial, serif}
font-style normal

italic

oblique

Нормальный шрифт
Курсив
Наклонный шрифт		 P {font-style: italic}
font-variant normal
small-caps 		Капитель
(особые прописные буквы)		 P {font-variant: small-caps}
font-weight normal
lighter
bold
bolder
100–900 		Нормальная жирность
Светлое начертание
Полужирный
Жирный
100 — светлый шрифт,
900 — самый жирный 		P {font-weight: bold}
font-size normal
pt
px

%		 нормальный размер

пункты

пикселы

проценты

font-size: normal
font-size: 12pt
font-size: 12px
font-size: 120%

В примере 1 показано использование параметров при работе со шрифтами.

Пример 1. Задание свойств шрифта с помощью CSS 

<!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=utf-8">
  <title>Шрифт</title>
  <style type="text/css"> 
   H1 { 
    font-family: Arial, Helvetica, Verdana, sans-serif; /* Гарнитура шрифта */ 
    font-size: 150%; /* Размер текста */ 
    font-weight: lighter; /* Светлое начертание */ 
   }
  </style>
 </head>
 <body>
   <H1>Заголовок</H1>
  <p>Обычный текст</p>
 </body> 
</html>

Ниже приведен результат данного примера (рис. 1).

Вид текста после применения стилей

Рис. 1. Вид текста после применения стилей

В табл. 2 приведены некоторые стилевые параметры для работы с текстом и результат
их применения.

Табл. 2. Результат использования различных параметров шрифтов

Пример Пример Пример Пример Пример
font-family: Verdana, sans-serif; font-size: 120%; font-weight:
light		 font-size: large; font-weight: bold font-family: Arial, sans-serif; font-size: x-small; font-weight:
bold		 font-variant: small-caps font-style: italic; font-weight: bold

Свойства текста

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

Табл. 3. Свойства CSS для управления видом текста

Свойство Значение Описание Пример
line-height normal

множитель

значение

%		 Интерлиньяж (межстрочный интервал) line-height: normal

line-height: 1.5
line-height: 12px

line-height: 120%
text-decoration none

underline

overline

line-through

blink

 Убрать все оформление

Подчеркивание

Линия над текстом

Перечеркивание

Мигание текста

 text-decoration: none
text-transform none

capitalize

uppercase

lowercase 		Убрать все эффекты

Начинать С Прописных

ВСЕ ПРОПИСНЫЕ

все строчные

 text-transform: capitalize
text-align left

right

center

justify

 Выравнивание текста text-align: justify
text-indent значение
% 		Отступ первой строки text-indent: 15px;

text-indent: 10%

Ниже, в табл. 4 приведены некоторые параметры текста и результат их применения.

Табл. 4. Результат использования различных параметров текста

Пример: и это все о нем Пример: текст по центру Пример: Это не ссылка,
а просто текст		 Пример: отступ первой строки Пример: полуторный межстрочный интервал
text-transform: capitalize text-align:center text-decoration: underline text-indent: 20px line-height: 1.5
Источник

На этом уроке мы познакомимся с основными приёмами для работы с текстом с помощью средств CSS.

Задавать стили CSS к тексту можно на уровне элемента body (для всей веб-страницы), элемента p (для абзаца), элемента span (для выделенного фрагмента текста) или любого другого элемента HTML.

Основные свойства CSS для работы с текстом

1. Свойство font-size

Свойство font-size изменяет размер шрифта. Оно задаётся с помощью значения и единицы измерения (em, px, pt, %). Единицы измерения em и % являются относительными и зависят от размера шрифта установленного в документе. Единицы измерения px и pt являются абсолютными и их размер зависит от разрешения экрана. Также у данного свойства есть предопределенные значения small и larger, которые соответственно уменьшают или увеличивают текст по отношению к базовому.

<p style="font-size:1em;">Lorem ipsum dolor sit amet</p>
<p style="font-size:120%;">Lorem ipsum dolor sit amet</p>
<p style="font-size:16px;">Lorem ipsum dolor sit amet</p>
<p style="font-size:14pt;">Lorem ipsum dolor sit amet</p>  
<p style="font-size:larger;">Lorem ipsum dolor sit amet</p>
<p style="font-size:small;">Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

2. Свойство font-weight

Свойство font-weight изменяет жирность шрифта. Свойство font-weight имеет 2 часто используемых значения: normal (обычное) и bold (жирное). Остальные значения используются очень редко, перечислим их: числовые от 100 до 900 с шагом 100 (100 – самое тонкое начертание, 900 – самое жирное начертание), bolder и lighter.

<p style="font-weight:normal;">Lorem ipsum dolor sit amet</p>
<p style="font-weight:bold;">Lorem ipsum dolor sit amet</p>
<p style="font-weight:200;">Lorem ipsum dolor sit amet</p>
<p style="font-weight:900;">Lorem ipsum dolor sit amet</p>  
<p style="font-weight:lighter;">Lorem ipsum dolor sit amet</p>
<p style="font-weight:bolder;">Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

3. Свойство font-style

Свойство font-style устанавливает тексту курсивное начертание. Оно принимает следующие значения: normal (обычное начертание шрифта), italic (курсивное начертание).

<p style="font-style:normal;">Lorem ipsum dolor sit amet</p>
<p style="font-style:italic;">Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

4. Свойство font-family

Свойство font-family изменяет шрифт или список шрифтов с помощью которых отображается текст. В качестве значений свойство font-family принимает названия шрифтов (например: font-family: «Tahoma», «Arial») или предопределенные названия группы шрифтов (serif, sans-serif, monospace, fantasy, cursive).

<p style="font-family:'Times New Roman','Arial';">Lorem ipsum dolor sit amet</p>
<p style="font-family:serif;">Lorem ipsum dolor sit amet</p>
<p style="font-family:sans-serif;">Lorem ipsum dolor sit amet</p>
<p style="font-family:monospace;">Lorem ipsum dolor sit amet</p>
<p style="font-family:fantasy;">Lorem ipsum dolor sit amet</p>
<p style="font-family:cursive;">Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

5. Свойство color

Свойство color изменяет цвет шрифта. Установить цвет можно несколькими способами: #ff0000 (шестнадцатеричное значение цвета), orange (зарезервированное название цвета), rgb(120,17,90) (RGB значение).

<p style="color:#aa00aa;">Lorem ipsum dolor sit amet</p>
<p style="color:pink;">Lorem ipsum dolor sit amet</p>
<p style="color:rgb(17,17,17)">Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

6. Свойство background-color

Свойство background-color можно использовать для выделения текста цветом, т.е. текст делается похожим на текст выделенный маркером. Установить цвет можно такими же способами, как и для свойства color. 

<p>Lorem ipsum <span style="background-color:yellow;">dolor sit</span> amet</p>
<p style="color:orange;">Lorem ipsum dolor <span style="background-color:green;">sit amet</span></p>
<p><span style="background-color:gray;">Lorem</span> ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

6. Свойство text-decoration

Свойство text-decoration можно использовать для декоративного оформления текста. В качестве значений свойства text-decoration можно использовать следующие: none (без декоративного оформления), underline (подчёркивание), overline (линия над текстом), line-through (зачёркивание), blink (эффект мигания).

<p style="text-decoration:none;">Lorem ipsum dolor sit amet</p>
<p style="text-decoration:underline;">Lorem ipsum dolor sit amet</p>
<p style="text-decoration:overline;">Lorem ipsum dolor sit amet</p>
<p style="text-decoration:line-through;">Lorem ipsum dolor sit amet</p>
<p style="text-decoration:underline line-through;">Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Подчёркивание также можно создать с помощью свойства CSS border.

<p>Lorem ipsum <span style="color:red; text-decoration: none;
border-bottom: 1px dashed red;">dolor sit</span> amet</p>
<p><span style="color:blue; text-decoration: none;
border-bottom: 1px dashed blue;">Lorem </span>ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

7. Свойство text-transform

Свойство text-transform управляет регистром символов. В качестве значений свойства text-transform можно использовать следующие: none (по умолчанию), lowercase (переводит все символы в строчные), uppercase (переводит все символы в прописные), capitalize (каждое слово начинается с прописного символа).

<p style="text-transform:none;">Lorem ipsum dolor sit amet</p>
<p style="text-transform:lowercase;">Lorem ipsum dolor sit amet</p>
<p style="text-transform:uppercase;">Lorem ipsum dolor sit amet</p>
<p style="text-transform:capitalize;">Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

8. Свойство white-space

При обработке текста браузер не отображает больше одного пробела между словами, а также игнорирует переносы строк, которые вы выполнили в HTML коде. При помощи свойства white-space вы можете настроить поведение браузера с помощью следующих значений: normal (по умолчанию), nowrap (не переносит текст, пока не встретит тег br), pre (отображает текст как в коде на HTML), pre-wrap (отображает все пробелы между словами и переносит текст, если он не помещается в контейнер).

<p style="white-space:normal;">Lorem    ipsum 

dolor sit amet</p>
<hr>
<p style="white-space:pre;">Lorem    ipsum 

dolor sit amet</p>

Lorem ipsum

dolor sit amet

Lorem ipsum

dolor sit amet

9. Свойство text-align

Свойство text-align предназначено для выравнивания текста в горизонтальном направлении. Значения свойства text-align указывают, что текст будет выровнен: left (по левому краю), center (по центру), right (по правому краю), justify (по ширине, т.е. одновременно по левому и правому краям).

<p style="text-align:left;">...</p>
<hr>
<p style="text-align:center;">...</p>
<hr>
<p style="text-align:right;">...</p>
<hr>
<p style="text-align:justify;">...</p>

Lorem ipsum dolor sit amet. Impedit, quo voluptas assumenda est, qui minus id quod. Quas molestias excepturi sint, obcaecati cupiditate non numquam eius. Perspiciatis, unde omnis iste natus error sit voluptatem. Et harum quidem rerum facilis est laborum et molestiae consequatur. Minus id, quod maxime placeat, facere possimus. Quo minus id, quod maxime placeat facere. Et molestiae consequatur, vel eum iure reprehenderit, qui dolorem ipsum, quia consequuntur.

Lorem ipsum dolor sit amet. Impedit, quo voluptas assumenda est, qui minus id quod. Quas molestias excepturi sint, obcaecati cupiditate non numquam eius. Perspiciatis, unde omnis iste natus error sit voluptatem. Et harum quidem rerum facilis est laborum et molestiae consequatur. Minus id, quod maxime placeat, facere possimus. Quo minus id, quod maxime placeat facere. Et molestiae consequatur, vel eum iure reprehenderit, qui dolorem ipsum, quia consequuntur.

Lorem ipsum dolor sit amet. Impedit, quo voluptas assumenda est, qui minus id quod. Quas molestias excepturi sint, obcaecati cupiditate non numquam eius. Perspiciatis, unde omnis iste natus error sit voluptatem. Et harum quidem rerum facilis est laborum et molestiae consequatur. Minus id, quod maxime placeat, facere possimus. Quo minus id, quod maxime placeat facere. Et molestiae consequatur, vel eum iure reprehenderit, qui dolorem ipsum, quia consequuntur.

Lorem ipsum dolor sit amet. Impedit, quo voluptas assumenda est, qui minus id quod. Quas molestias excepturi sint, obcaecati cupiditate non numquam eius. Perspiciatis, unde omnis iste natus error sit voluptatem. Et harum quidem rerum facilis est laborum et molestiae consequatur. Minus id, quod maxime placeat, facere possimus. Quo minus id, quod maxime placeat facere. Et molestiae consequatur, vel eum iure reprehenderit, qui dolorem ipsum, quia consequuntur.

10. Свойство vertical-align

Свойство vertical-align может использоваться для строчных элементов (в том числе для элементов со свойством display:inline-block), ячеек таблицы, и предназначено для выравнивания текста по вертикали. Значения свойства vertical-align указывают, что текст будет выровнен: top (по верхнему краю строки), middle (по середине), bottom (по нижнему краю строки), baseline (значение по умолчанию, выравнивание по базовой линии), sub (текст отображается в виде нижнего индекса, как подстрочный), super (текст отображается в виде верхнего индекса, как надстрочный).

<p style="font-size:2em; background:paleturquoise;">Lorem ipsum dolor <small style="font-size:0.5em; vertical-align:top;">sit amet</small>.</p>
<hr>
<p style="font-size:2em; background:paleturquoise;">Lorem ipsum dolor <small style="font-size:0.5em; vertical-align:middle;">sit amet</small>.</p>
<hr>
<p style="font-size:2em; background:paleturquoise;">Lorem ipsum dolor <small style="font-size:0.5em; vertical-align:bottom;">sit amet</small>.</p>
<hr>
<p style="font-size:2em; background:paleturquoise;">Lorem ipsum dolor <small style="font-size:0.5em; vertical-align:baseline;">sit amet</small>.</p>
<hr>
<p style="font-size:2em; background:paleturquoise;">Lorem <span style="vertical-align:sub">ipsum</span> dolor <span style="vertical-align:super">sit amet</span>.</p>

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

11. Свойство line-height

Свойство line-height предназначено для задания высоты строки, которая влияет на расстояние между строчками текста. В качестве значений свойства line-height можно использовать следующие: число (множитель по отношению к значению высоты строки по умолчанию), проценты (например: 120% от высоты строки по умолчанию), px (например: 16px), em (например: 3em), зарезервированное слово normal (автоматический расчёт высоты).

<p>...</p>
<hr>
<p style="line-height:200%;">...</p>
<hr>
<p style="line-height:3;">...</p>
<hr>
<p style="line-height:normal;">...</p>
<hr>
<p style="line-height:24px;">...</p>

Lorem ipsum dolor sit amet. Eos et quas molestias excepturi sint. Tempora incidunt, ut aliquid. Quibusdam et molestiae non provident, similique sunt in culpa, qui in. Eligendi optio, cumque nihil molestiae consequatur, vel eum fugiat. Alias consequatur aut fugit. Ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti.

Lorem ipsum dolor sit amet. Eos et quas molestias excepturi sint. Tempora incidunt, ut aliquid. Quibusdam et molestiae non provident, similique sunt in culpa, qui in. Eligendi optio, cumque nihil molestiae consequatur, vel eum fugiat. Alias consequatur aut fugit. Ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti.

Lorem ipsum dolor sit amet. Eos et quas molestias excepturi sint. Tempora incidunt, ut aliquid. Quibusdam et molestiae non provident, similique sunt in culpa, qui in. Eligendi optio, cumque nihil molestiae consequatur, vel eum fugiat. Alias consequatur aut fugit. Ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti.

Lorem ipsum dolor sit amet. Eos et quas molestias excepturi sint. Tempora incidunt, ut aliquid. Quibusdam et molestiae non provident, similique sunt in culpa, qui in. Eligendi optio, cumque nihil molestiae consequatur, vel eum fugiat. Alias consequatur aut fugit. Ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti.

Lorem ipsum dolor sit amet. Eos et quas molestias excepturi sint. Tempora incidunt, ut aliquid. Quibusdam et molestiae non provident, similique sunt in culpa, qui in. Eligendi optio, cumque nihil molestiae consequatur, vel eum fugiat. Alias consequatur aut fugit. Ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti.

Источник


Download Article


Download Article

Coding an HTML page to use a certain font is a cool thing, and it styles a HTML page with the font of your choice. This article will explain how to do it.

Steps

  1. Image titled Change the Font Type Using HTML Programming Step 1

    1

    Have your «HTML markup» well under way in your editor of choice. If you’re new to this, look up instructions on creating your first HTML page.

  2. Image titled Change the Font Type Using HTML Programming Step 2

    2

    Find the point in your HTML page where you would like to specify the font to be used. It will be at the start of the chosen text; a sentence or paragraph.

    Advertisement

  3. Image titled Change the Font Type Using HTML Programming Step 3

    3

    Remember that we tell the web browser, via our HTML, how to present our text using «attributes». These precede and end the piece we would like to alter the appearance of. These attributes are marked with special symbols which the browser recognizes as special commands to be used to control the content. These are < and >.

  4. Image titled Change the Font Type Using HTML Programming Step 4

    4

    Know the initial part of the attribute. It is as follows:

    • <span style="font-family:name of font goes here">
    • The <font> tag can still be used, but it is deprecated. The face attribute of the <font> tag allows you to use a font locally installed on the system. You can also use fonts defined with the CSS @font-face at-rule.

  5. Image titled Change the Font Type Using HTML Programming Step 5

    5

    Close the text with the following closing attribute, after specifying the section of it to be changed.

  6. Image titled Change the Font Type Using HTML Programming Step 6

    6

    Go back to using the font and settings you normally use in your browser. Notice the slash on the opening «closing» attribute. That will give you the complete command in HTML.

    7. Advertisement

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

Advertisement

Video

  • You cannot rely on a font existing on every machine which might browse your page. Common fonts such as Arial or Courier should be fine.

  • Notice they are separated by a comma.

  • However, there is a trick you can use to increase your chances of getting a font you want. This involves supplying a list of alternative fonts. They are presented in order of preference.

Thanks for submitting a tip for review!

Advertisement

  • If you really want to use a strange font you might create a graphic of the word(s) using the font and insert that instead. That way, it will be displayed exactly as you’ve created it.

  • As mentioned in the Tips section, you cannot assume that the machine someone is using to look at your website will have the font you’ve specified. So, try to avoid weird and exotic fonts.

  • A big caveat is that HTML5 will not be using this attribute and you will need to use CSS. If you want to know how to do this, you can look up instructions for it on the Internet.

Advertisement

About This Article

Thanks to all authors for creating a page that has been read 36,025 times.

Is this article up to date?

Источник


Download Article


Download Article

Coding an HTML page to use a certain font is a cool thing, and it styles a HTML page with the font of your choice. This article will explain how to do it.

Steps

  1. Image titled Change the Font Type Using HTML Programming Step 1

    1

    Have your «HTML markup» well under way in your editor of choice. If you’re new to this, look up instructions on creating your first HTML page.

  2. Image titled Change the Font Type Using HTML Programming Step 2

    2

    Find the point in your HTML page where you would like to specify the font to be used. It will be at the start of the chosen text; a sentence or paragraph.

    Advertisement

  3. Image titled Change the Font Type Using HTML Programming Step 3

    3

    Remember that we tell the web browser, via our HTML, how to present our text using «attributes». These precede and end the piece we would like to alter the appearance of. These attributes are marked with special symbols which the browser recognizes as special commands to be used to control the content. These are < and >.

  4. Image titled Change the Font Type Using HTML Programming Step 4

    4

    Know the initial part of the attribute. It is as follows:

    • <span style="font-family:name of font goes here">
    • The <font> tag can still be used, but it is deprecated. The face attribute of the <font> tag allows you to use a font locally installed on the system. You can also use fonts defined with the CSS @font-face at-rule.

  5. Image titled Change the Font Type Using HTML Programming Step 5

    5

    Close the text with the following closing attribute, after specifying the section of it to be changed.

  6. Image titled Change the Font Type Using HTML Programming Step 6

    6

    Go back to using the font and settings you normally use in your browser. Notice the slash on the opening «closing» attribute. That will give you the complete command in HTML.

    7. Advertisement

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

Advertisement

Video

  • You cannot rely on a font existing on every machine which might browse your page. Common fonts such as Arial or Courier should be fine.

  • Notice they are separated by a comma.

  • However, there is a trick you can use to increase your chances of getting a font you want. This involves supplying a list of alternative fonts. They are presented in order of preference.

Thanks for submitting a tip for review!

Advertisement

  • If you really want to use a strange font you might create a graphic of the word(s) using the font and insert that instead. That way, it will be displayed exactly as you’ve created it.

  • As mentioned in the Tips section, you cannot assume that the machine someone is using to look at your website will have the font you’ve specified. So, try to avoid weird and exotic fonts.

  • A big caveat is that HTML5 will not be using this attribute and you will need to use CSS. If you want to know how to do this, you can look up instructions for it on the Internet.

Advertisement

About This Article

Thanks to all authors for creating a page that has been read 36,025 times.

Is this article up to date?

Источник

HTML Font Style – How to Change Text Color and Size with an HTML Tag

When you code in HTML and add some text, you don’t want to leave it like that. You want to make that text look good.

And to do that, you need to change their appearance through the color and font-size properties of CSS.

In this tutorial, I will show you two different ways you can make your HTML texts look good.

Basic font-size Syntax

selector {
     font-size: value;
     color: value;
}

You can change the color and size of your text right inside its tag with the color and font-size properties. This is known as inline CSS. You do it with the style attribute in HTML.

In the HTML code below, we will change the color and size of the freeCodeCamp text.

<h1>freeCodeCamp</h1>

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

It looks like this in the browser:
unstyled-font

To change the size of the text, you’ll use the style attribute, and then set a value with the font-size property like this:

<h1 style="font-size: 4rem">freeCodeCamp</h1>

The text now looks like this in the browser:
text-size

If you are wondering what 4rem is, it’s a unit of measurement. It’s the same as 64 pixels, because 16px makes 1rem unless you change the root font-size (html) to another value.

To change the color of the text, you can use the style attribute, and then set a value with the color property:

<h1 style="color: #2ecc71">freeCodeCamp</h1>

This is what we now have in the browser:
text-color

Combining the font-size and color properties gives us this in the browser:

inline-text-size-and-color

With the code:

<h1 style="font-size: 4rem; color: #2ecc71">freeCodeCamp</h1>

How to Change Text Size and Text Color in an External CSS File

You can also change the color and size of text in an external stylesheet. Most importantly, you have to link the external CSS in the head section of your HTML.

The basic syntax for doing it looks like this:

<link rel="stylesheet" href="path-to-css-file">

Now, to change the text size and color of the freeCodeCamp text, you need to select it in the stylesheet and apply the appropriate properties and values to it.

Remember this is our simple HTML code:

<h1>freeCodeCamp</h1>

You can change the color and size of the text by selecting the element (h1) and assigning values to the color and font-size properties:

 h1 {
    color: #2ecc71;
    font-size: 4rem;
}

We have the same result in the browser:
external-text-size-and-color

Conclusion

I hope this tutorial gives you the knowledge to be able to change the size and color of your HTML text so you can make them look better.

Thank you for reading, and keep coding.

Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started

Источник

Понравилась статья? Поделить с друзьями:
  • Как изменить вид стрелки мыши
  • Как изменить вид стикеров на андроид
  • Как изменить вид сообщества вконтакте
  • Как изменить вид смс на андроиде
  • Как изменить вид смайлов на андроид