Css стили текста: CSS стили текста

Содержание

CSS стили текста

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

Примеры записи стилей с заданными свойствами

font-family

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

	
font-family : Arial, Gadget, sans-serif;
font-family : Courier New, monospace;
font-family : Impact, fantasy;

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


HTML

<div>
  <div>
    font-family
  </div>
  <div>
    Выбор шрифта
  </div>
</div>


CSS

.box{
    width: 260px;
    margin: 0px auto;
    padding: 3px 20px;
    background-color: #fc0;
}
.box .title,
.box .meaning{
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}
.box .title{
    font-size: 25px;
    font-weight: bold;
}
.box .meaning{
    font-size: 22px;
}

font-size

Для определения размера шрифта в CSS делается следующая запись:


font-size : 250%;
font-size : 30px;
font-size : 11pt;
font-size : 0.5em;

font-style

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


font-style : normal;
font-style : italic;

normal – обычное начертание текста

italic – курсивное начертание

oblique – наклонный текст. Отличается от курсива тем, что наклоняет текст, а не выводит соответствующие символы.

font-variant

Стилями CSS можно задать вывод символов в верхнем регистре либо в исходном формате.


font-variant : normal;
font-variant : small-caps;

normal – формат символов остаётся по умолчанию

small-caps – данная опция преобразует все строчные символы как заглавные буквы с уменьшенным размером.

font-weight

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


font-weight : lighter;
font-weight : bold;
font-weight : normal;
font-weight : bolder;


font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;

bold – полужирный шрифт

bolder – жирный шрифт

lighter – светлый шрифт

normal – установка стандартного начертания

100 – 900 – значение насыщенности с шагом через 100

400 – Нормальное начертание шрифта, которое установлено по умолчанию

Пример записи стилей текста в одной строке

		
font : bold italic 22px Times New Roman, serif;
font : bold italic 22px Arial, sans-serif;
font : 12pt/10pt Courier New, monospace;
font : bold italic 110% Parkavenue, cursive;
font : normal small-caps 12px/14px Impact, fantasy;

CSS — Работа с текстом

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

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

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

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

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


<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>  
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

2.

Свойство font-weight

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


<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>  
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

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

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


<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

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

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


<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

5.

Свойство color

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


<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

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

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


<p>Lorem ipsum <span>dolor sit</span> amet</p>
<p>Lorem ipsum dolor <span>sit amet</span></p>
<p><span>Lorem</span> ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

6.

Свойство text-decoration

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


<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

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


<p>Lorem ipsum <span>dolor sit</span> amet</p>
<p><span>Lorem </span>ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

7.

Свойство text-transform

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


<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

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

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


<p>Lorem    ipsum 

dolor sit amet</p>
<hr>
<p>Lorem    ipsum 

dolor sit amet</p>

Lorem ipsum

dolor sit amet

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

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


<p>...</p>
<hr>
<p>...</p>
<hr>
<p>...</p>
<hr>
<p>...</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.

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

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


<p>Lorem ipsum dolor <small>sit amet</small>.</p>
<hr>
<p>Lorem ipsum dolor <small>sit amet</small>.</p>
<hr>
<p>Lorem ipsum dolor <small>sit amet</small>.</p>
<hr>
<p>Lorem ipsum dolor <small>sit amet</small>.</p>
<hr>
<p>Lorem <span>ipsum</span> dolor <span>sit amet</span>.</p>

Lorem ipsum dolor sit amet.

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

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


<p>...</p>
<hr>
<p>...</p>
<hr>
<p>...</p>
<hr>
<p>...</p>
<hr>
<p>...</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.

Основы стилизирования текста и шрифта — Изучение веб-разработки

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

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

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

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

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

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

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

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

<h2>Tommy the cat</h2>

<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:

p {
  color: red;
}

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

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

Note: 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.

Note: 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!

Note: 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:

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 <h2> (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?


<article> 
  <p>My paragraph</p> 
</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:

html {
  font-size: 10px;
}

h2 {
  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:

html {
  font-size: 10px;
}

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

h2 + 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:

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.
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.
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.
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 <h2> (en-US) element in our Tommy the cat example, we’d end up with this:

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 <h2> (en-US) in our example, we’d end up with this:

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:

line-height: 1.6;

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

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:

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:

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.

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.

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.

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.

как не надо • Не дублируйте стили текста

Не нужно задавать разным элементам одинаковые стили текста.

Почему? #

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

Как это увидеть? #

В браузере в инструментах разработчика:

Все перечёркнутые свойства были унаследованы, но затем перезаписаны точно такими же. Так делать не надо.

А как надо? #

Стили текста достаточно задать один раз в body, и они автоматом применятся ко всем элементам страницы.

Плохо

BODY {
  background: #FFF;
}
.page-main {
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1.4;
  color: #333;
}
.news {
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1.4;
}
.news-item {
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1.4;
  color: #333;
}
.news-item__title {
  font-family: Georgia, serif;
  font-size: 20px;
  line-height: 1.4;
  color: #333;
}
.news-item__content {
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1.4;
  color: #000;
}

Хорошо

BODY {
  background: #FFF;
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1.4;
  color: #333;
}
.news-item__title {
  font-size: 20px;
}
.news-item__content {
  color: #000;
}

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

Как проверить, что всё работает как надо? Там же, в инструментах разработчика:

На скриншоте видно, что стили текста унаследовались из body, а цвет фона — нет (он показан бледным)

Ещё один способ:

Во вкладке Computed поищите конкретные свойства или посмотрите в Rendered Fonts — там показывается какой шрифт в итоге применился к тексту.Там же можно проверить применился ли ваш красивый кастомный шрифт. Не смотря на то, что кастомный MyFancyFont объявлен в списке первым, текст в итоге отрисовался запасным — Georgia. Значит надо проверить правильно ли подключен кастомный шрифт.

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

Подводные камни #

Стили текста для инпутов и кнопок задаются браузером:

Стили в body перечеркнуты, потому что перезаписаны стилями, который задаёт браузер — они отображаются на сером фоне, а в качестве источника указано user agent stylesheet. В Rendered Fonts что-то совсем не то, что нужно.

Это легко поправить, задав наследование явно:

input, textarea, select, button {
  font: inherit;
}

Если нужно наследовать только семейство шрифтов, вместо font: inherit; задайте font-family: inherit;

Проверяем в Computed: Georgia.Там же можно увидеть что чем перезаписалось.

Итого

Не дублируйте стили текста, они наследуются.
Браузер перезаписывает стили для инпутов и кнопок, пропишите явное наследование.

Лучшие стили текста в CSS?

Где я могу получить хороший и чистый CSS для текста.

Для ex.The word нажмите шрифт, и текст выглядит потрясающе !!

Любой пример или любой веб-сайт для создания такого ?

html

css

Поделиться

Источник

5416339

07 декабря 2010 в 11:35

3 ответа

SharePoint Стили По Умолчанию
Я создаю пользовательскую веб-часть для SharePoint и пытаюсь использовать стили по умолчанию, чтобы, когда люди будут тематизировать сайт, он будет тематизироваться вместе с ним. Я нашел пару приличных сайтов, которые показывают различные стили, такие как:…
Css лучшие практики: стили, специфичные для одного элемента dom
Каков предпочтительный способ хранения стилей, очень специфичных для одного элемента dom? В отдельном файле css или встроенном в атрибут style в файле html? Я приведу вам пример. Это css, который у меня сейчас есть в файле css. Заголовок, название продукта, описание продукта и изображение…

Typechart-отличный инструмент. Взгляните, вы можете захватить CSS http:/ / www.typechart.com/

Поделиться

Vlad.P

07 декабря 2010 в 11:39

Джорджия хорошая. К сожалению, веб-разработчики ограничены основными шрифтами 10-12, которые включены в большинство шрифтов OS и поддерживаются большинством браузеров. Если вам нужны хорошие шрифты для заголовков или небольших фрагментов текста, то используйте Cufon, но не помещайте через него большие блоки текста, так как он не будет выбираться. Поэтому я боюсь, что вы смешались с основными шрифтами: Verdana, Tahoma, Arial, Palatino и т. д…

Поделиться

benhowdle89

07 декабря 2010 в 11:40

Хотя он и не предназначен исключительно для текста (скорее для дизайна в целом), CSS Zen Garden всегда является отличным местом для идей и т. д.

Поделиться

Bob Palmer

07 декабря 2010 в 11:40

Переопределите стандартные стили текста в iOS7
Можно ли переопределить стандартные стили текста: UIFontTextStyleBody , UIFontTextStyleHeadline и т. д.?
Конфликтующие стили css в Chrome
Проблема с Chrome при отображении моих стилей css: Горизонтальная навигационная система должна иметь серый фон и черный цвет текста, но на Chrome получить бордовый и белый текст. На I.E 9 работает нормально, а на Chrome-нет. Стиль для второй навигационной системы выглядит нормально. Как мне…

Fonts CSS HTML шрифты, цвет и размер текста

Свойства шрифта CSS определяют семейство шрифтов, смелость, размер и стиль текста.

Разница между засечками и шрифтами без засечек

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

В CSS существует два типа имен семейств шрифтов:

родовое семейство — группа семейств шрифтов с похожим видом (например, «засечка» или «однодисковая»)
семейство шрифтов — конкретная семья шрифтов (например, «Times New Roman» или «Arial»)

Generic family	Font family	Описание
Serif	Times New Roman Georgia	Шрифты с засечками имеют небольшие линии на концах на некоторых символах
Sans-serif	Arial Verdana	«Sans» означает без-эти шрифты не имеют линий на концах символов
Monospace	Courier New Lucida Console	Все одноместные символы имеют одинаковую ширину

Примечание: На компьютерных экранах шрифты без засечек считаются более удобными для чтения, чем шрифты с засечками.

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

Семейство шрифтов текста задается с помощью свойства font-family.

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

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

Примечание: Если имя семейства шрифтов больше одного слова, оно должно быть в кавычках, например: «Times New Roman».

В списке, разделенном запятыми, указано несколько семейств шрифтов:

Пример

p {
font-family: «Times New Roman», Times, serif;
}

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

Стиль шрифта

Свойство font-style в основном используется для указания текста курсивом.

Это свойство имеет три значения:

normal — Текст отображается нормально
italic — Текст показан курсивом
oblique — Текст «опираясь» (косой очень похож на курсив, но менее поддерживается)

Пример

p.normal {
font-style: normal;
}

p.italic {
font-style: italic;
}

p.oblique {
font-style: oblique;
}

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

Свойство font-size задает размер текста.

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

Всегда используйте правильные HTML-теги, например < h2 >-< H6 > для заголовков и < p > для абзацев.

Значение размера шрифта может быть абсолютным или относительным размером.

Абсолютный размер:

Устанавливает заданный размер текста
Не позволяет пользователю изменять размер шрифта во всех браузерах (плохо для специальных возможностей)
Абсолютный размер полезен, когда известен физический размер выходных данных

Относительный размер:

Устанавливает размер относительно окружающих элементов
Позволяет пользователю изменять размер текста в обозревателях

Примечание: Если размер шрифта не указан, по умолчанию для обычного текста, как и для абзацев, используется 16px (16px = 1em).

Задать размер шрифта с пикселями

Установка размера текста с пикселями дает полный контроль над размером текста:

Пример

h2 {
font-size: 40px;
}

h3 {
font-size: 30px;
}

p {
font-size: 14px;
}

Совет: При использовании пикселов можно по-прежнему использовать инструмент «Масштаб» для изменения размера всей страницы.

Установить размер шрифта с em

Чтобы разрешить пользователям изменять размер текста (в меню обозревателя), многие разработчики используют EM вместо пикселов.

Единица измерения размера em рекомендуется консорциумом W3C.

1em равен текущему размеру шрифта. Размер шрифта по умолчанию в обозревателях — 16px. Таким образом, по умолчанию размер 1em является 16px.

Размер можно вычислить от пикселов к EM использующ эту формулу: пикселы/16 =EM

Пример

h2 {
font-size: 2.5em; /* 40px/16=2.5em */
}

h3 {
font-size: 1. 875em; /* 30px/16=1.875em */
}

p {
font-size: 0.875em; /* 14px/16=0.875em */
}

В приведенном выше примере размер текста в EM совпадает с предыдущим примером в пикселях. Однако, с размером EM, можно настроить размер текста во всех браузерах.

К сожалению, есть еще проблема с более старыми версиями IE.
Текст становится больше, чем он должен, когда сделал больше, и меньше, чем он должен, когда сделал меньше.

Используйте комбинацию процентов и EM

Решение, которое работает во всех браузерах, заключается в том, чтобы задать размер шрифта по умолчанию в процентах для элемента <BODY>:

Пример

body {
font-size: 100%;
}

h2 {
font-size: 2.5em;
}

h3 {
font-size: 1.875em;
}

p {
font-size: 0.875em;
}

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

Вес шрифта

Свойство font-weight задает вес шрифта:

Пример

p. normal {
font-weight: normal;
}

p.thick {
font-weight: bold;
}

Отзывчивый размер шрифта

Размер текста может быть установлен с помощью vw единицы, что означает «ширина видового экрана».

Таким образом размер текста будет следовать размеру окна браузера:

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

Пример

<h2>Hello World</h2>

Видовой экран — это размер окна обозревателя. 1ВВ = 1% ширины видового экрана. Если видовой экран шириной 50 см, 1ВВ составляет 0.5 cm.

Шрифт вариант

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

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

Пример

p. normal {
font-variant: normal;
}

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

Другие примеры

Все свойства шрифта в одном
Декларации
В этом примере демонстрируется использование сокращенного свойства для установки всех
свойства шрифта в одном объявлении.

Все свойства шрифта CSS

Свойство	Описание
font	Задает все свойства шрифта в одном объявлении
font-family	Задает семейство шрифтов для текста
font-size	Задает размер шрифта текста
font-style	Задает стиль шрифта для текста
font-variant	Указывает, должен ли текст отображаться в шрифте с малыми прописными буквами
font-weight	Определяет вес шрифта

Создание CSS стилей текста 2

Продолжим изучать изменения текста с помощью свойств Каскадных таблиц стилей, начатое в предыдущей статье о создании стилей текста
Свойство Text-Decoration

Свойство Text-Decoration даёт возможность оформления текста виде его подчеркивания, перечеркивания, добавления линии над текстом, или мигания. Существует несколько основных значений этого свойства, рассмотрим их:

underline — подчеркивание текста снизу;
overline — подчеркивание текста сверху;
line-through — перечеркивание текста;
blink — Мигающий текст.
none — Отсутствие дополнительного оформления (значение по умолчанию).

Для примера рассмотрим конкретный пример кода:

<title>Text-decoration</title>
<style type=»text/css»>
I A {
text-decoration: none;
}
P {
text-decoration: overline;
}

h4 {
text-decoration: line-through;
}
Div {
text-decoration: blink;
}
h3 {
text-decoration:underline;
}
</style>
</head>
<body>

<a href=»#»>Простая ссылка подчёркнута</a><br><br>
<i><a href=»#»>Внутри тега I ссылка без подчёркивания</a></i>
<p>Текст внутри параграфа — подчёркивание сверху</p>
<div>Мигающий текст внутри тега DIV</div>
<h4>Перечёркнутый текст заголовка h4</h4>
<h3>Подчёркнутый текст заголовка h3</h3>

</body>
<html>

На скриншоте примера всё наглядно видно. Перейдём к следующим CSS свойствам текста.

Свойство TEXT-TRANSFORM

Свойство Text-transform определяет регистр написания текста
Рассмотрим различные значения данного свойства:

capitalize — Первая буква(символ) каждого слова в предложении становится заглавной. Другие буквы(символы) свой вид не меняют.
lowercase — Все буквы(символы) текста меняются на строчные, т. е. пишутся в нижнем регистре.
uppercase — Все буквы(символы текста меняются на прописные, т. е. пишутся в верхнем регистре.
inherit — Наследуется значение свойства текста родительского элемента.
none — Не вносит изменений в регистр написание символов.

Вновь прибегним к наглядности примера:

<html>
<head>
<title>Text-transform</title>
<style type=»text/css»>

P {
text-transform: capitalize;
}

B {
text-transform: lowercase;
}
Div {
text-transform: uppercase;
}
I {
text-transform: inherit;
}

</style>
</head>

<body>

<p>Первые буквы каждого слова стали заглавными. </p>
<div>Все буквы текста внутри тега DIV пишутся строчными</div>
<br><b>Все буквы текста внутри тега B поменялись на прописные</b>
<p><i>Текст внутри тега I унаследовал свойства параграфа</i></p>
</body>
</html>

Рисунок наглядно показывает действие свойства Text-transform.

Свойство CSS Word-spacing

Как известно из уроков по HTML, несколько пробелов между словами всегда заменяются одним. Однако, веб-мастерам иногда необходимо задать нужное конкретно им расстояние между словами. Тут на помощь приходит свойство CSS Word-spacing.
Для задания значений данного свойства используют любые, принятые на вооружение CSS, единицы длины, кроме процентов. И снова прибегаем к примеру:

<html>
<head>
<title>Word-spacing</title>
<style type=»text/css»>

P {
word-spacing: 15px;
}
Div {
word-spacing: -2px;
}

</style>
</head>
<body>
Расстояние между словам по-умолчанию<br>

<p>Заданное расстояние в 15px</p>
<div>Расстояние между словами уменьшенно до -2px</div>
</body>
</html>

На примере наглядно видно действие свойства CSS стилей Word-spacing. При использовании значений со знаком минус — желательно проверить их действие в разных браузерах. Последний рисунок немного увеличен (для наглядности это будет применяться и впредь), поэтому размеры отличаются от оригинальных.

Свойство CSS Letter-spacing

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

Для задания свойства Letter-spacing используются все единицы длины из архива CSS, и отрицательные значения тоже. Наиболее удобными, в применении к данному свойству, являются относительные значения, которые привязаны к размеру шрифта. К ним можно отнести «em» и «ex».
Более наглядно — на примере:

<html>
<head>
<title>Letter-spacing</title>
<style type=»text/css»>

P {
Letter-spacing: 0. 4em;
}
Div {
Letter-spacing: 0.1em;
}
h4 {
Letter-spacing: -2px;
}

</style>
</head>

<body>
Самый обычный текст
<h4>Заголовок h4</h4>
<p>Текст с расстоянием 0.4em</p>
<div>Текст с расстоянием 0.1em</div>
</body>
</html>

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

CSS шрифтов

Выбор правильного шрифта для вашего сайта очень важен!

Выбор шрифта важен

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

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

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

Общие семейства шрифтов

В CSS существует пять общих семейств шрифтов:

Шрифты Serif имеют небольшой штрих по краям каждой буквы. Они создают ощущение формальности и элегантности.
Шрифты без засечек имеют чистые линии (без мелких штрихов). Они создают современный и минималистичный вид.
Моноширинный шрифт — здесь все буквы имеют одинаковую фиксированную ширину. Они создают механический вид.
Курсивный шрифт имитирует человеческий почерк.

Шрифты

Fantasy — это декоративные / игривые шрифты.

Все различные имена шрифтов принадлежат к одному из общих семейств шрифтов.

Разница между шрифтами с засечками и без засечек

Примечание: Считается, что на экранах компьютеров шрифты без засечек легче читать, чем шрифты с засечками.

Некоторые примеры шрифтов

Общее семейство шрифтов	Примеры названий шрифтов
Serif	Times New Roman Джорджия Гарамонд
Без засечек	Arial Verdana Helvetica
Моноширинный	Courier New Lucida Console Monaco
Курсив	Brush Script MT Lucida Рукописный ввод
Фэнтези	Медная пластина Папирус

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

В CSS мы используем свойство font-family для
укажите шрифт текста.

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

Примечание : Если в названии шрифта более одного слова, оно должно быть заключено в кавычки, например: «Times New Roman».

Пример

Укажите несколько разных шрифтов для трех абзацев:

.p1 {
font-family: «Times New Roman», Times, serif;
}

.p2 {Семейство шрифтов
: Arial, Helvetica, sans-serif;
}

.p3 {
font-family: «Lucida Console», «Courier New», моноширинный;
}

Попробуй сам »

CSS: шрифты

CSS: шрифты

См. Также указатель всех подсказок.

На этой странице:

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

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

Так как не все шрифты доступны на всех компьютерах (есть
тысячи шрифтов, и большинство из них платные), CSS предоставляет систему
откатов. Сначала вы указываете нужный шрифт, а затем любые шрифты
который может заменить первый, если он недоступен, и вы
должен заканчивать список общим шрифтом , из которых
пять: с засечками, без засечек, моноширинный, курсив
и фэнтези.

В следующей таблице приведены примеры различных шрифтов (ваш
браузер может не знать их все), и вы можете увидеть, что ваш браузер
делает с каждым из пяти общих:

Семейство шрифтов	Ваш браузер	Пример изображения
‘sans-serif’: обычные шрифты без засечки
`Arial, без засечек`	Быстрая коричневая лисица Прыгает через ленивую собаку
`Helvetica, без засечек`	Быстрый коричневый Лиса перепрыгивает через ленивую собаку
`Verdana, без засечек`	Быстрая коричневая лисица Прыгает через ленивую собаку
`Trebuchet MS, без засечек`	Быстрый Коричневая лиса перепрыгивает через ленивую собаку
`Gill Sans, без засечек`	Быстрый коричневый Лиса перепрыгивает через ленивую собаку
`Noto Sans, sans-serif`	Быстрый коричневый Лиса перепрыгивает через ленивую собаку
`Avantgarde, TeX Gyre Adventor, URW Gothic L, без засечек`	Быстрая коричневая лисица перепрыгивает через ленивую собаку
`Optima, без засечек`	Быстрая коричневая лисица Прыгает через ленивую собаку
`Arial Narrow, без засечек`	Быстрый Коричневая лиса перепрыгивает через ленивую собаку
`без засечек`	Быстрые прыжки коричневой лисы Над ленивым псом
‘serif’: обычные шрифты с засечками
`Times, Times New Roman, с засечками`	Быстрый Коричневая лиса перепрыгивает через ленивую собаку
`Didot, с засечками`	Быстрые прыжки коричневой лисы Над ленивым псом
`Джорджия, с засечками`	Быстрая коричневая лисица Прыгает через ленивую собаку
`Palatino, URW Palladio L, serif`	Быстрая коричневая лисица перепрыгивает через ленивую собаку
`Bookman, URW Bookman L, serif`	Быстрый Коричневая лиса перепрыгивает через ленивую собаку
`New Century Schoolbook, TeX Gyre Schola, serif`	Быстрая коричневая лисица перепрыгивает через ленивую собаку
`Американская пишущая машинка, с засечками`	Быстрый Коричневая лиса перепрыгивает через ленивую собаку
`с засечками`	Быстрая коричневая лиса перепрыгивает Ленивая собака
‘моноширинный’: шрифты фиксированной ширины
`Andale Mono, моноширинный`	Быстрый коричневый Лиса перепрыгивает через ленивую собаку
`Courier New, моноширинный`	Быстрый коричневый Лиса перепрыгивает через ленивую собаку
`Курьер, моноширинный`	Быстрая коричневая лисица Прыгает через ленивую собаку
`FreeMono, моноширинный`	Быстрая коричневая лисица Прыгает через ленивую собаку
`OCR A Std, моноширинный`	Быстрый коричневый Лиса перепрыгивает через ленивую собаку
`DejaVu Sans Mono, моноширинный`	Быстрый Коричневая лиса перепрыгивает через ленивую собаку
`моноширинный`	Быстрые прыжки коричневой лисы Над ленивым псом
‘cursive’: шрифты, имитирующие почерк.
`Comic Sans MS, Comic Sans, курсив`	Быстрая коричневая лисица перепрыгивает через ленивую собаку
`Apple Chancery, курсив`	Быстрый коричневый Лиса перепрыгивает через ленивую собаку
`Брэдли Хэнд, курсив`	Быстрый коричневый Лиса перепрыгивает через ленивую собаку
`Brush Script MT, Brush Script Std, курсив`	Быстрая коричневая лисица перепрыгивает через ленивую собаку
`Snell Roundhand, курсив`	Быстрый Коричневая лиса перепрыгивает через ленивую собаку
`URW Chancery L, курсив`	Быстрый коричневый Лиса перепрыгивает через ленивую собаку
`курсив`	Быстрая коричневая лиса перепрыгивает Ленивая собака
«фантазия»: декоративные шрифты, для заголовков и т. Д.
`Удар, фантазия`	Быстрая коричневая лисица Прыгает через ленивую собаку
`Luminari, фэнтези`	Быстрая коричневая лисица Прыгает через ленивую собаку
`Мел, фантазия`	Быстрый коричневый Лиса перепрыгивает через ленивую собаку
`Jazz LET, фэнтези`	Быстрая коричневая лисица Прыгает через ленивую собаку
`Блиппо, фантазия`	Быстрая коричневая лисица Прыгает через ленивую собаку
`Stencil Std, фантазия`	Быстрый коричневый Лиса перепрыгивает через ленивую собаку
`Маркер Войлок фантазия`	Быстрый коричневый Лиса перепрыгивает через ленивую собаку
`Траттателло, фэнтези`	Быстрый коричневый Лиса перепрыгивает через ленивую собаку
`фантазия`	Быстрая коричневая лиса перепрыгивает Ленивая собака

Стили шрифта

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

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

правило	с засечками	без засечек
Стили
`стиль шрифта: нормальный`	Быстрый…	Быстрый…
`стиль шрифта: курсив`	Быстрый…	Быстрый…
`шрифт: наклонный`	Быстрый…	Быстрый…
Масса
`font-weight: 100`	Быстрый…	Быстрый…
`font-weight: 200`	Быстрый…	Быстрый…
`font-weight: 300`	Быстрый…	Быстрый…
`font-weight: normal`	Быстрый…	Быстрый…
`font-weight: 500`	Быстрый…	Быстрый…
`font-weight: 600`	Быстрый…	Быстрый…
`font-weight: bold`	Быстрый…	Быстрый…
`font-weight: 800`	Быстрый…	Быстрый…
`вес шрифта: 900`	Быстрый…	Быстрый…
Варианты
`вариант шрифта: нормальный`	Быстрый…	Быстрый…
`вариант шрифта: small-caps`	Быстрый…	Быстрый…
Растяжка
`font-stretch: сверхконденсированный`	Быстрый…	Быстрый…
`font-stretch: сверхконденсированный`	Быстрый…	Быстрый…
`font-stretch: сжатый`	Быстрый…	Быстрый…
`font-stretch: полуконденсированный`	Быстрый…	Быстрый…
`font-stretch: normal`	Быстрый…	Быстрый…
`font-stretch: полураскрытый`	Быстрый…	Быстрый…
`font-stretch: расширенный`	Быстрый…	Быстрый…
`font-stretch: сверхразвернутый`	Быстрый…	Быстрый…
`font-stretch: сверхрасширенный`	Быстрый…	Быстрый…

Модуль CSS Fonts имеет дополнительные свойства, которые можно указать специальным образом.
стили (для шрифтов с несколькими вариантами), в частности
Свойство font-variant имеет гораздо больше значений.

Основы стилизации текста CSS · Документы WebPlatform

Сводка

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

Введение

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

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

Примечание. Статья «Веб-типографика» закладывает хорошую основу для этой главы, объясняя ряд типографских понятий. Обязательно прочтите его перед этим.

Печатать в Интернете?

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

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

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

Стили шрифта

CSS

имеет ряд свойств, начинающихся с font- , которые позволяют вам управлять многими функциями самих текстовых символов (или глифов). Мы рассмотрим это в следующих разделах.

Выбор шрифта из семейства font-family

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

 Семейство шрифтов : Arial;

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

Веб-шрифты

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

Sans-serif : шрифты без засечек: Verdana, Arial, Trebuchet MS
Serif : шрифты с засечками: Times new roman, Georgia
Моноширинный : шрифты, в которых каждый глиф занимает такое же пространство, как в компьютерном коде: Andale mono, Courier new
Cursive : шрифты с декоративным стилем, часто напоминающим рукописный: Comic Sans
Fantasy : шрифты с жирным, часто орнаментальным или причудливым стилем, которые предназначены для использования в заголовках, а не в основной части: Impact

Наборы шрифтов

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

 Семейство шрифтов : 'helvetica neue', arial, verdana, sans-serif;

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

Итак:

Браузер ищет Helvetica neue в системе пользователя и использует этот шрифт, если находит его.
Если Helvetica neue не найдена, браузер ищет Arial в системе пользователя и использует его, если находит.
Если Arial не найден, мы воспользуемся Verdana.
В крайнем случае, если ни один из шрифтов в стеке шрифтов не найден, шрифт возвращается к шрифту без засечек, который указывает браузеру использовать тот шрифт, который является системным шрифтом без засечек по умолчанию. Вы не знаете точно, что будет использоваться в этом случае, что является досадной потерей контроля, но, по крайней мере, это лучше, чем в конечном итоге использовать браузер по умолчанию — Times new roman, который является шрифтом с засечками.

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

Переопределение основного шрифта

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

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

  h2, h3 {
  семейство шрифтов: влияние;
}

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

Что касается других элементов контента, на которые мы можем повлиять, как насчет выделенного текста? Например, вы можете использовать для всех ссылок, содержащих даты, чтобы они немного выделялись. Как бы то ни было, браузер выделяет курсивом по умолчанию, но это не так сильно выделяется, как могло бы. Добавьте следующее правило:

  em {
  семейство шрифтов: грузия;
}

Ваши шрифты (особенно заголовки) вносят наибольший вклад в общую индивидуальность вашего сайта, поэтому тщательно выбирайте их, чтобы они соответствовали друг другу.Поначалу это может показаться трудным, но вскоре вы научитесь этому. Как правило, Times new roman подходит для корпоративных сайтов, тогда как шрифт без засечек, такой как Arial, может быть лучше для менее формального сайта. Курсивные шрифты нужно использовать с осторожностью — например, Comic sans ненавидят многие дизайнеры, но в некоторых случаях он подходит, например, для создания эффекта мела на доске на детском сайте.

Раньше было сложно работать с заголовками. Учитывая, что единственный веб-безопасный фэнтезийный шрифт кажется Impact (неплохо, но представьте, если бы все сайты должны были его использовать), и вы не хотите зацикливаться на системном шрифте по умолчанию, таком как ужасный Papyrus, дизайнеры использовали различные техники изображения для заголовков.Как вы уже должны знать, использование изображений для текста на веб-сайте действительно плохо, потому что изображения не могут быть прочитаны программами чтения с экрана или поисковыми системами. В следующем разделе вы найдете некоторые решения этой проблемы.

Замена изображения

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

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

  h2 {
  фоновое изображение: url (myheading.png);
  высота: 55 пикселей;
  текстовый отступ: -9000px;
}

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

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

Этот метод очень негибкий. Вы должны создать изображение для каждого бита текста, который хотите заменить, а затем менять их каждый раз, когда вы хотите изменить размер, цвет, формулировку или что-то еще. А представьте, что вы пытаетесь использовать замену изображения на фрагментах текста внутри абзацев, а также в заголовках? Слишком нудно.
Текст хорошо масштабируется при увеличении масштаба; изображений нет. Если вы увеличите масштаб слишком сильно, графический заголовок начнет выглядеть зернистым и пиксельным.
Если вы используете слишком много замены текста, дополнительные HTTP-запросы могут замедлить загрузку вашей страницы. Некоторые более сложные методы замены изображений могут еще больше замедлить работу страницы, поскольку они используют Flash (siFR) или SVG (cufon).

Веб-шрифты

К счастью, CSS3 представляет веб-шрифты, функцию, которая позволяет нам указывать наши собственные файлы шрифтов для загрузки вместе с нашими веб-страницами. Это замечательно, поскольку полностью решает проблему недоступности шрифтов на компьютерах пользователей.Чтобы указать веб-шрифт для загрузки на странице, вы ссылаетесь на шрифт в специальном блоке @ font-face , который идет вверху страницы и выглядит примерно так:

  @ font-face {
  font-family: 'Мой шрифт';
  src: url ('myfont.ttf') формат ('truetype');
}

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

Затем вы включаете шрифт на свою страницу точно так же, как и другие шрифты:

  font-family: 'Мой шрифт';

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

Выполните следующие действия:

Получите файл шрифта. Практически все форматы будут работать. Шрифт, который мне нравится для заголовков, называется Romantiques, я получил его на Fontspace.com. Загрузите zip-файл и распакуйте его.
Посетите fontsquirrel.com и выберите генератор @ font-face.
Нажмите «Добавить шрифты», выберите файл шрифта Romantique, который вы хотите использовать, и установите флажок «Отказ от ответственности».
Нажмите кнопку «Загрузить комплект». Через несколько секунд вам будет предложено сохранить набор веб-шрифтов. Сохраните его в своих файлах примеров.
Распакуйте комплект, и вы увидите несколько файлов. Интересующие вас файлы — это файлы различных форматов шрифтов и stylesheet.css .
Скопируйте все файлы шрифтов (.eot , .svg , .ttf и .woff ) в разумное место в ваших файлах примеров. Проще всего сохранить файлы в том же каталоге, что и файл HTML.
Откройте файл stylesheet.css и скопируйте правило CSS внутри него в начало стилей файла примера. Выглядит это так:

  @ font-face {
  семейство шрифтов: 'RomantiquesRegular';
  src: url ('romantiques-webfont.eot');
  src: url ('romantiques-webfont.eot? #iefix ') формат (' embedded-opentype '),
       url ('romantiques-webfont.woff') формат ('woff'),
       url ('romantiques-webfont.ttf') формат ('truetype'),
       url ('romantiques-webfont.svg # RomantiquesRegular') формат ('svg');
  шрифт: нормальный;
  стиль шрифта: нормальный;
}

Опять же, семейство шрифтов диктует имя шрифта, используемое для его идентификации в коде.
Значения src определяют расположение файлов шрифтов. Различные браузеры, сталкивающиеся с этим, продолжают просматривать список, пока не найдут формат, который они понимают, после чего они загружают этот файл шрифта и используют его на странице (хотя некоторые браузеры немного глючны и могут загружать больше, чем только тот, который они необходимость, тратя впустую полосу пропускания в процессе).IE использует версию .eot ; большинство современных браузеров будут использовать файл .woff , который меньше по размеру файла, чем другие; старые браузеры, отличные от IE, которые не поддерживают .woff , будут использовать файлы .ttf или .svg .
, font-weight и font-style определяют атрибуты, такие как толщина шрифта, и если он курсивный, но пока не стоит о них беспокоиться.

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

Удалите правило h2 , которое вы добавили ранее, и замените его следующим:

  h2, h3 {
  семейство шрифтов: RomantiquesRegular;
}

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

  цвет: # 530FAD;

При таком использовании пользовательских шрифтов возникают некоторые проблемы.Рассмотрим следующее:

Размер файла : В этой статье я намеренно выбрал шрифт большого размера, чтобы выделить проблемы с размером файла. Большинство файлов западных шрифтов не такие уж большие, но файлы Romantique в основном занимали несколько сотен КБ, а SVG весил почти 1 МБ! Это большой дополнительный вес, который нужно добавить к странице, особенно для тех, кто загружает в более медленную полосу пропускания, например в мобильные сети. И хотя западные наборы глифов обычно содержат только десятки символов, может быть, несколько сотен, если набор действительно полный, некоторые языковые наборы шрифтов (особенно CJK ) могут содержать буквально тысячи символов и иметь размер во много МБ.Будьте внимательны!
Размер шрифта : Вы заметите, что размер шрифта намного меньше, чем в версии с заменой изображения. Различные базовые размеры шрифтов также могут сильно различаться, поэтому примите это во внимание при настройке размеров шрифтов и исследуйте, насколько резервные размеры шрифтов будут соответствовать основным шрифтам, которые вы хотите использовать.
FOUT : Это происходит, когда страница загружается, и на короткое время текст отображается без примененного веб-шрифта, прежде чем веб-шрифт завершит загрузку.Когда он загружается, страница сдвигается, чтобы показать новый шрифт, что может вызвать раздражение у посетителя. Вы можете смягчить это с помощью библиотеки, такой как загрузчик веб-шрифтов Google или FOUT-b-Gone.
Количество глифов / качество шрифта : доступно множество бесплатных шрифтов с таких сайтов, как Font squirrel, DaFont, My Fonts и веб-шрифты Google, однако не все они высокого качества, а некоторые могут иметь очень ограниченный набор глифов, поэтому вместо символов будут отображаться ужасные пустые квадратики, если на странице есть символы, которых нет в выбранном шрифте.Это представляет гораздо большую проблему для основного текста, чем для заголовков, и вам нужно быть особенно осторожным с этим, если вы используете веб-шрифты на сайтах с пользовательским контентом, потому что вы не можете точно контролировать, какие символы вводят посетители. Некоторые шрифты также могут плохо выглядеть в определенных операционных системах (они могут плохо выглядеть в Windows, если у пользователя не включен cleartype). Единственный ответ здесь — тщательно протестировать шрифты, прежде чем использовать их в своем дизайне. Например, запятая в первых
выглядела ужасно после того, как я установил свои шрифты на Romantique, поэтому я удалил ее.

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

Установка единиц измерения и размер шрифта

Следующее свойство CSS, на которое следует обратить внимание, — это font-size . Это позволяет вам установить размер текста внутри выбранных элементов, используя любые доступные единицы CSS, такие как пиксели, em, проценты и т. Д.

Вы также можете использовать ключевые слова размера: xx-small , x-small , small , medium , large , x-large и xx-large .Их лучше всего использовать, когда вы хотите установить размеры шрифтов относительно друг друга. Например, размер основного текста — средний , тогда вы можете установить заголовок верхнего уровня на xx-large , а затем, возможно, установить заголовок второго уровня на x-large .

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

Установка базового размера шрифта

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

  размер шрифта: 62,5%

Почему 62,5%? Ответ заключается в том, что размер шрифта по умолчанию для большинства браузеров составляет 16 пикселей. 62,5% от 16 равно 10, поэтому, используя этот процент, вы устанавливаете базовый шрифт для всего сайта на 10 пикселей, что упрощает последующие математические вычисления.

Установка размеров корпуса и заголовка

Затем обратите внимание на размеры шрифтов для различного контента. Базовый размер шрифта составляет 10 пикселей, что позволяет легко определить размеры остального текста страницы. Например, если вы хотите, чтобы заголовки первого уровня были размером 42 пикселя, вы можете установить размер шрифта на 420% или 4,2 пикселя. Для наших целей проценты и ems работают почти одинаково. Различия не так уж и важны, по крайней мере, на данный момент. Оба модуля устанавливают размеры пропорционально размеру родительского шрифта, и дополнительным бонусом является то, что вы также можете установить другие размеры в своем дизайне в процентах от em, такие как поля, ширина блоков содержимого и многое другое.Приятно иметь возможность контролировать весь сайт по размеру текста.

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

На данный момент придерживайтесь ems при написании правил.

Добавьте к своим стилям следующие правила:

  h2 {
  размер шрифта: 5.5em;
}

h3 {
  размер шрифта: 3em;
}

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

Затем установите основной текст и список, чтобы облегчить чтение:

  п, ул {
  размер шрифта: 1.6em;
}

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

Затем установите акцент немного меньше, чтобы он выделялся еще лучше:

  em {
  размер шрифта: 0.8em;
}

Если вам интересно, почему вам пришлось установить его на 0.8em, чтобы получить немного меньше, а не 1,5 или 1,4, попробуйте и убедитесь. Причина в том, что для родительских элементов (либо

, либо

) установлено значение 1.5em. Размер зависит от размера шрифта непосредственного родителя, поэтому в этом контексте 16 пикселей равно 1em. Мы установили 0,8em для выделенного текста, поэтому размер получается как 16px x 0,8 = около 13 пикселей.
Примечание. Размеры пикселей, о которых мы здесь говорим, называются вычисленными значениями .Независимо от единиц и значений, которые вы используете для установки размеров шрифта, компьютеры отображают графику в пикселях, поэтому браузер должен преобразовать все в значения в пикселях, прежде чем он сможет отображать их для посетителей.
Изменение деталей с помощью font-weight, font-style и font-option
Затем вы проверите следующие свойства:
font-weight позволяет установить жирность текста в выбранных элементах.
font-style позволяет сделать текст элемента наклонным или курсивным.
font-option позволяет вам сделать текст элемента прописными буквами, также известными как медные буквы.
Использование font-weight
Используйте это свойство, если хотите, чтобы текст был более жирным. Возможные значения:
полужирный и полужирный обеспечивают два уровня дополнительной жирности.
светлее обеспечивает уровень меньшей смелости.
100 , 200 … вплоть до 900 обеспечивают постепенные уровни жирности.
нормальный — значение по умолчанию без жирного шрифта.
Большинство из этих настроек не имеют особого значения для визуального восприятия, особенно при установке небольших размеров шрифта и когда для используемого шрифта не определены различные уровни полужирности.
В этом примере добавьте следующее правило, чтобы выделить первые строки под каждым заголовком:
h2 + p: first-line, h3 + p: first-line { font-weight: жирный; }
Затем сохраните страницу, перезагрузите окно браузера и просмотрите результаты.
Примечание: жирным шрифтом эквивалентно 700 .
Настройка стиля шрифта
font-style может принимать значения курсив , наклонный и нормальный . Нормальный — это значение по умолчанию, как и раньше, курсив указывает браузеру использовать курсивную версию шрифта (если таковая имеется), а наклонный указывает браузеру использовать обычную версию шрифта, но наклонить ее. Если вы укажете курсивом , если у используемого вами шрифта нет определенной версии курсива, браузер вернется к созданию наклонной версии для использования.
Добавьте следующую строку к правилу, которое вы добавили в предыдущем разделе:
стиль шрифта: курсив;
Работа с вариантом шрифта
font-option может принимать два значения: нормальный , который, как и ожидалось, является значением по умолчанию, и small-caps , который использует все заглавные символы, но большие для заглавных букв, и маленькие для строчных буквы. Добавьте следующее к правилу em и посмотрите, что получится:
вариант шрифта: капители;
Заключение
Теперь вы должны понимать основы стилизации текста и уметь применять эти методы к своим собственным страницам.Для получения дополнительной информации см. Другие учебные статьи в этом разделе.
Форматирование текста с помощью CSS — Учебник Republic
Из этого туториала Вы узнаете, как стилизовать текст на своих веб-страницах с помощью CSS.
Форматирование текста с помощью CSS
CSS предоставляет несколько свойств, которые позволяют определять различные стили текста, такие как цвет, выравнивание, интервал, оформление, преобразование и т. Д.очень легко и эффективно.
Обычно используемые свойства текста: выравнивание текста , украшение текста , преобразование текста , отступ текста , высота строки , межбуквенный интервал , межсловный интервал , и больше. Эти свойства дают вам точный контроль над внешним видом символов , слов , пробелов и т. Д.
Давайте посмотрим, как установить эти текстовые свойства для элемента более подробно.
Цвет текста
Цвет текста определяется свойством CSS color .
Правило стиля в следующем примере определит цвет текста по умолчанию для страницы
Хотя кажется, что свойство цвета будет частью текста CSS, но на самом деле это отдельное свойство в CSS. См. Руководство по цвету CSS, чтобы узнать больше о свойстве color.
Выравнивание текста
Свойство text-align используется для установки горизонтального выравнивания текста.
Текст можно выровнять четырьмя способами: по левому, правому, по центру или по ширине (прямые левые и правые поля).
Давайте рассмотрим пример, чтобы понять, как в основном работает это свойство.
h2 { выравнивание текста: центр; } п { выравнивание текста: выравнивание; }
Примечание: Когда для параметра text-align установлено значение justify , каждая строка растягивается так, чтобы каждая строка имела одинаковую ширину (кроме последней строки), а левое и правое поля были прямыми.Это выравнивание обычно используется в таких публикациях, как журналы и газеты.
Давайте взглянем на следующую иллюстрацию, чтобы понять, что на самом деле означают эти значения.
Оформление текста
Свойство text-decoration используется для установки или удаления украшений из текста.
Это свойство обычно принимает одно из следующих значений: подчеркивание , подчеркивание , сквозное и отсутствие .Вам следует избегать подчеркивания текста, который не является ссылкой, так как это может сбить с толку посетителя.
Давайте попробуем следующий пример, чтобы понять, как это в основном работает:
h2 { текст-оформление: надстрочный; } h3 { текстовое оформление: сквозное; } h4 { оформление текста: подчеркивание; }
Удаление подчеркивания по умолчанию из ссылок
Свойство text-decoration широко используется для удаления подчеркивания по умолчанию из гиперссылок HTML.Вы также можете предоставить некоторые другие визуальные подсказки, чтобы выделить его из обычного текста, например, используя пунктирную рамку вместо сплошного подчеркивания.
Давайте посмотрим на следующий пример, чтобы понять, как это в основном работает:
a { текстовое оформление: нет; нижняя граница: 1px с точками; }
Примечание: Когда вы создаете ссылку HTML, браузеры, встроенные в таблицу стилей, автоматически подчеркивают ее и применяют синий цвет, чтобы читатели могли четко видеть, какой текст доступен для нажатия.
Преобразование текста
Свойство text-transform используется для установки регистра текста.
Текст часто пишется в смешанном регистре. Однако в определенных ситуациях вы можете захотеть отобразить свой текст в совершенно другом регистре. Используя это свойство, вы можете изменить текстовое содержимое элемента на прописные или строчные буквы или сделать первую букву каждого слова заглавной, не изменяя исходный текст.
Давайте попробуем следующий пример, чтобы понять, как это в основном работает:
h2 { текст-преобразование: прописные буквы; } h3 { текст-преобразование: заглавные буквы; } h4 { текст-преобразование: нижний регистр; }
Отступ текста
Свойство text-indent используется для установки отступа первой строки текста в блоке текста.Обычно это делается путем вставки пустого места перед первой строкой текста.
Размер отступа может быть указан в процентах (%), значениях длины в пикселях, ems и т. Д.
Следующее правило стиля приведет к отступу первой строки абзаца на 100 пикселей.
p { текстовый отступ: 100 пикселей; }
Примечание: Будет ли текст с отступом: слева, или справа, , зависит от направления текста внутри элемента, определенного свойством CSS direction .
Расстояние между буквами
Свойство letter-spacing используется для установки дополнительного интервала между символами текста.
Это свойство может принимать значение длины в пикселях, ems и т. Д. Оно также может принимать отрицательные значения. При установке межбуквенного интервала значение длины указывает интервал в дополнение к межсимвольному интервалу по умолчанию.
Давайте посмотрим на следующий пример, чтобы понять, как это работает на самом деле:
h2 { межбуквенный интервал: -3px; } п { межбуквенный интервал: 10 пикселей; }
Расстояние между словами
Свойство word-spacing используется для указания дополнительного интервала между словами.
Это свойство может принимать значение длины в пикселях, ems и т. Д. Также допускаются отрицательные значения.
Давайте попробуем следующий пример, чтобы понять, как работает это свойство:
p.normal { интервал между словами: 20 пикселей; } p.justified { интервал между словами: 20 пикселей; выравнивание текста: выравнивание; } p.preformatted { интервал между словами: 20 пикселей; белое пространство: предварительно; }
Примечание. На интервал между словами может влиять выравнивание текста.Кроме того, несмотря на то, что пробелы сохраняются, на пробелы между словами влияет свойство word-spacing .
Высота линии
Свойство line-height используется для установки высоты текстовой строки.
Он также называется интерлиньяж и обычно используется для установки расстояния между строками текста.
Значение этого свойства может быть числом, процентом (%) или длиной в пикселях, ems и т. Д.
Если значение является числом, высота строки вычисляется путем умножения размера шрифта элемента на число. В то время как процентные значения относятся к размеру шрифта элемента.
Примечание. Отрицательные значения для свойства line-height недопустимы.Это свойство также является компонентом сокращенного свойства шрифта CSS.
Если значение свойства line-height больше, чем значение font-size для элемента, эта разница (называемая «ведущим» ) сокращается вдвое (называемая «наполовину ведущий «) и равномерно распределить по верхней и нижней части линейного бокса. Давайте посмотрим на пример:
p { размер шрифта: 14 пикселей; высота строки: 20 пикселей; цвет фона: # f0e68c; }
См. Руководство по переполнению текста CSS3 в расширенном разделе, чтобы узнать, как обрабатывать переполненный текст.Также см. Раздел «Тень текста в CSS3», чтобы узнать, как применить эффект тени к тексту.
Генератор CSS-стилей шрифтов
| 𝗧𝗛𝗘 𝗕𝗘𝗦𝗧 𝗢𝗡𝗟𝗜𝗡𝗘 𝗖𝗦𝗦 𝗚𝗘𝗡𝗘𝗥𝗔𝗧𝗢𝗥
Семейство шрифтов:
Грузия
Грузия
Палатино
Times New Roman
Arial
Ариал Черный
Comic Sans
Удар
Lucida Sans
Тахома
Требуше
Вердана
Курьер
Консоль Lucida
Украшение:
Нет
Подчеркнутый
Overline
Линейный
Стиль:
Обычный
Не задано
Курсив
косой
Преобразовать:
нет
прописные
строчная
капитализировать
Создайте стиль своего веб-текста с помощью этого онлайн-генератора шрифтов CSS.Установите желаемый стиль для текста на панели управления и мгновенно получите код.
Найти правильную строку для объявления шрифта CSS — не всегда самая легкая вещь, которая приходит в голову людям. Здесь вы можете легко выбрать веб-шрифт из раскрывающегося списка, увеличить размер шрифта, установить расстояние между буквами и словами. Отрегулируйте цвет, толщину шрифта, оформление, стиль шрифта, вариант и преобразование.
Когда предварительный просмотр приблизится к вашей цели, отправьте код в интерактивный редактор для ручной корректировки.Обратите внимание, что текст может выглядеть немного по-другому на действующем веб-сайте с другим файлом .ccs.
Не забудьте проверить онлайн-генератор теней для текста, чтобы стилизовать текст еще лучше. Вы даже не поверите, как с этим можно добиться потрясающих эффектов.
CSS Стили для текста | Учебник CSS
Самая важная часть веб-сайта — это текст, потому что это то, для чего был создан HTML, чтобы разметить текст, который будет опубликован в Интернете.Текст является неотъемлемой частью каждой веб-страницы. Веб-страница с отличным дизайном, но нечитабельным, некрасивым и неформатированным текстом очень неуместна.
Теперь, когда вы поняли основы свойств фона CSS, давайте приступим к созданию красивого, хорошо отформатированного текста на нашей веб-странице.
В этом модуле мы не собираемся обсуждать шрифты, но мы собираемся обсудить представление текста.
Текстовые свойства — это весело поэкспериментировать, и они, несомненно, добавят динамичности вашей веб-странице.Начнем с самого основного свойства любого текста — цвета!
Цвет текста
Свойство color определяет цвет текста. Представленный в CSS1 , он поддерживается почти всеми веб-браузерами. Выбирая цвет для текста, не забывайте о цвете фона.
Как и в background-color , в этом свойстве цвет может быть указан в любой из следующих трех форм:
допустимое название цвета, например красный , синий и т. Д.
HEXA-код, как и для белого цвета, это #FFFFFF , а для черного — # 000000
значение RGB
Синтаксис:
селектор { красный цвет; }
Живой пример →
Это совместимо с CSS1 , CSS2 и CSS3 вместе со следующими веб-браузерами,
IE 3+
Firefox 1+
Опера 3.5+
Safari 1+
Хром 1+
Направление текста
Свойство текста direction можно использовать для поддержки нескольких языков в одном документе. Значение по умолчанию — ltr , т.е. слева направо . Для некоторых языков, таких как арабский, персидский, урду и т. Д., Требуется направление текста Справа налево .
Например,
body { направление: RTL; }
Живой пример →
Приведенный выше код CSS изменит направление каждого текста на веб-странице справа налево.
Это совместимо с CSS1 , CSS2 и CSS3 вместе со следующими веб-браузерами,
IE 5.5+
Firefox 1+
Opera 9.2+
Safari 1.3+
Хром 2+
Расстояние между буквами
Это свойство определяет интервал между буквами слов в тексте.
Синтаксис:
межбуквенный интервал: нормальный | длина | начальная | наследовать;
Длина может быть положительным или отрицательным значением.Первоначально для свойства установлено значение по умолчанию, то есть нормальный .
h2 { межбуквенный интервал: 2 пикселя; } h3 { межбуквенный интервал: -3px; }
Живой пример →
Это совместимо с CSS1 , CSS2 и CSS3 вместе со следующими веб-браузерами,
IE 4+
Firefox 1+
Opera 3.5+
Safari 1+
Хром 1+
Выравнивание текста
Ах, более привычный text-align ! Это свойство определяет горизонтальное выравнивание текста в элементе.Значение по умолчанию соответствует свойству direction. Выравнивание будет правым, если направление установлено на rtl , и левым, если направление установлено на ltr .
Синтаксис:
выравнивание текста: по левому краю | право | центр | оправдать | наследовать;
Например,
# text-center { выравнивание текста: центр; }
Живой пример →
Это совместимо с CSS1 , CSS2 и CSS3 вместе со следующими веб-браузерами,
IE 3+
Firefox 1+
Опера 3.5+
Safari 1+
Хром 1+
Отступ текста
Это свойство определяет отступ (интервал) текста от первой строки удерживающего блока (верхний левый угол). Для этого свойства можно указать отрицательные значения. Как вы, вероятно, догадались, текст будет смещен влево для отрицательного значения и далеко от левой стороны для положительного значения. Длина может быть указана в пикселей, , см, , пикселей, и т. Д.Вы также можете указать процентное значение для этого свойства.
Синтаксис:
отступ текста: длина;
Например,
#little_towards_right { текстовый отступ: 10 пикселей; }
Живой пример →
Это совместимо с CSS1 , CSS2 и CSS3 вместе со следующими веб-браузерами,
IE 3+
Firefox 1+
Опера 3.5+
Safari 1+
Хром 1+
Оформление текста
Свойство text-decoration определяет украшение, добавленное к тексту.
ПРИМЕЧАНИЕ: В CSS3 свойство text-decoration является сокращенным свойством для text-decoration-line , text-decoration-color и text-decoration-style , но в настоящее время это не поддерживается ни в одном из основных браузеров.
Синтаксис:
оформление текста: нет | подчеркивание | надчеркнутый | Линия, проходящая через;
Например,
#underlined { оформление текста: подчеркивание; }
Живой пример →
Это совместимо с CSS1 , CSS2 и CSS3 вместе со следующими веб-браузерами,
IE 3+
Firefox 1+
Опера 3.5+
Safari 1+
Хром 1+
Тень текста
Свойство text-shadow добавляет тень к тексту.
Синтаксис:
text-shadow: цвет h-shadow v-shadow blur-radius | никто;
h-shadow и v-shadow являются обязательными параметрами. h-shadow указывает расстояние по горизонтали между фактическим текстом и его тенью, а h-shadow указывает расстояние по вертикали между текстом и его тенью.
Если мы не укажем никакого значения для blur-radius , тогда тень будет точной копией фактического текста, слегка смещенной из-за h-shadow и v-shadow. blur-radius делает его размытым, большее значение делает тень более размытой.
Например,
h2 {text-shadow: 2px 2px 5px # ff0000; }
Живой пример →
Это совместимо с CSS1 , CSS2 и CSS3 вместе со следующими веб-браузерами,
IE 10+
Firefox 3.5+
Опера 9.6+
Safari 4+
Хром 4+
Примечание: Чтобы добавить к тексту более одной тени, добавьте список теней, разделенных запятыми.
Есть еще много других свойств текста, с которыми вы можете работать. Упомянутые выше свойства являются одними из наиболее часто используемых! Далее, шрифты!
15 красивых текстовых эффектов, созданных с помощью CSS
Красивый текст или типографика сделают ваш дизайн привлекательным.В веб-дизайне CSS помогает придать стиль дизайну, включая различные эффекты в тексте или типографике. С помощью CSS вы можете использовать обрезку и добавлять анимацию к тексту, чтобы немного оживить его.
И чтобы проиллюстрировать это, мы собрали 15 потрясающих и интересных текстовых эффектов, которые стали возможными с помощью CSS (некоторые с небольшой помощью кода Javascript).
Чтобы узнать больше о том, что вы можете сделать с CSS, посетите:
Эластичный ход Анимация
См. CSS + SVG Pen Elastic stroke, автор: yoksel (@yoksel) на CodePen.
Сбой SVG
Хотите создать эффекты, похожие на сломанный аналоговый телевизор? Дирк Вебер создал этот потрясающий эффект сбоя, используя фильтры CSS и SVG.
See the Pen SVG Glitch авторства Дирка Вебера (@DirkWeber) на CodePen.
Логотип Shop Talk
Логотип Shop Talk воссоздан Хьюго с использованием только CSS. Логотип похож на оригинал, но с правильной текстурой.
См. Логотип Pen Shop Talk, сделанный в CSS Хьюго Дарби-Брауном (@hugo) на CodePen.
Режущий эффект
Эта идея Робета Мессерле дает эффект нарезки ножом, выполненный менее чем с 70 строками CSS.
См. Эффект CSS, разрезанный пером, Роберт Мессерле (@robertmesserle) на CodePen.
Elegant Shadow Effect
Эффект длинной тени применяется к тексту, созданному с помощью CSS. Создатель Хуан Брухо сделал еще 4 эффекта, но это, пожалуй, самый впечатляющий.
См. Эффекты тени текста CSS3 Pen от Хорхе Эпюан (@juanbrujo) на CodePen.
Эффект туманного текста
Андреас создает потрясающий кинематографический эффект тумана. Применимо только в браузерах Webkit.
См. Текстовый эффект Pen Foggy от andreas_pr (@andreas_pr) на CodePen.
Текстовая маска SVG
Дизайн Марко Барриа демонстрирует элегантный эффект маскировки текста на большом фоновом изображении.
См. Текстовую маску SVG Pen от Marco BarrÃƒÂa (@fixcl) на CodePen.
Анимация текста
Йоанн создал потрясающий эффект бегущей строки с помощью этой текстовой анимации.Посмотрите, как второе слово чередуется между тремя словами.
См. Анимацию Pen Text от Йоанна (@yoannhel) на CodePen.
Ударил по полу
Этот 3D-эффект от ThatGuySam представляет собой простую игру с текстовыми тенями, но с потрясающим результатом.
Посмотрите, как перо попало в пол Текстовый эффект от ThatGuySam (@ThatGuySam) на CodePen.
Текст фонового клипа
Jintos экспериментировал с фоновым клипом Webkit, чтобы добавить фоновое изображение внутри текста.Используя этот метод, он сделал 16 крутых творений.
См. Эффект CSS Pen -webkit-background-clip: text от Jintos (@Jintos) на CodePen.
CSS Text-FX
Moklik добавил к тексту эффект приглушенного света, давая вам прерывистые вспышки, предупреждающие об опасности издалека.
См. Pen CSS Text-FX от moklick (@moklick) на CodePen.
Анимированная подпись
Гэри Хептинг создал анимацию для подписания в реальном времени. Это работает путем применения Javascript к пути SVG для анимации подписи.
См. Анимированную подпись подписи пером (пути SVG) от Гэри Хептинга (@ghepting) на CodePen.
Красочный глюк 404
Вы слышите звук этого глюка и чувствуете вибрацию внутри своей головы? Вот насколько хорош этот эффект сбоя. mistic100 сделан с использованием CSS плюс немного Javascript.
See the Pen Colourful Glitchy 404 от mistic100 (@ mistic100).
Добавить комментарий Отменить ответ
Ваш адрес email не будет опубликован. Обязательные поля помечены *
Комментарий *
Имя *
Email *
Сайт

Навигация по записям
Previous PostКак взрослому человеку научиться рисовать: Где учиться рисовать взрослому человеку? 10 вариантов
Next PostКак в контакте прикрепить гифку в контакте: Как вставить Gif анимацию вконтакте в посты, в комментарии

Css стили текста: CSS стили текста