Font source code html

Пример

html> html> head> title>Заголовок документа title> head> body> p> font size="2" color="blue">Текст синего цвета font> p> p> font size="3" color="red">Текст красного цвета, размер шрифта увеличен. font> p> p> font face="arial" color="green">Текст зеленого цвета, гарнитура шрифта изменена. font> p> body> html>

Результат

CSS стили

Вместо атрибута color для изменения цвета используют CSS свойство color, вместо атрибута face — CSS свойство font-family или font-face, а вместо атрибута size CSS свойство font-size.

Пример

html> html> head> title>Заголовок документа title> head> body> p style="font-size:16px;color:blue">Текст синего цвета. p> p style="font-size:18px;color:red"> Текст красного цвета, размер шрифта увеличен. p> p style="font-size:18px;color:green;font-family:arial"> Текст зеленого цвета, гарнитура шрифта изменена. p> body> html>

Атрибуты

Как добавить стиль к тегу ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега :

• CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
• CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
• CSS свойство font-size задает размер щрифта.
• CSS свойство font-weight устанавливает насыщенность шрифта.
• CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
• CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

Цвет текста внутри тега :

Стили форматирования текста для тега :

• CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
• CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
• CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
• CSS свойство word-break указывает перенос строки.

Другие свойства для тега :

• CSS свойство text-shadow добавляет тень к тексту.
• CSS свойство text-align-last выравнивает последнюю строку текста.
• CSS свойство line-height устанавливает межстрочный интервал.
• CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
• CSS свойство word-spacing устанавливает расстояние между словами в тексте.

Источник

Font source code html

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The HTML element defines the font size, color and face for its content.

Warning: Do not use this element. Use the CSS Fonts properties to style text.

Attributes

Like all other HTML elements, this element supports the global attributes.

This attribute sets the text color using either a named color or a color specified in the hexadecimal #RRGGBB format.

This attribute contains a comma-separated list of one or more font names. The document text in the default style is rendered in the first font face that the client’s browser supports. If no font listed is installed on the local system, the browser typically defaults to the proportional or fixed-width font for that system.

This attribute specifies the font size as either a numeric or relative value. Numeric values range from 1 to 7 with 1 being the smallest and 3 the default. It can be defined using a relative value, like +2 or -3 , which sets it relative to 3 , the default value.

DOM interface

This element implements the HTMLFontElement interface.

Specifications

Browser compatibility

BCD tables only load in the browser

Found a content problem with this page?

This page was last modified on Jul 17, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

CSS Web Fonts

Web fonts allow Web designers to use fonts that are not installed on the user’s computer.

When you have found/bought the font you wish to use, just include the font file on your web server, and it will be automatically downloaded to the user when needed.

Your «own» fonts are defined within the CSS @font-face rule.

Different Font Formats

TrueType Fonts (TTF)

TrueType is a font standard developed in the late 1980s, by Apple and Microsoft. TrueType is the most common font format for both the Mac OS and Microsoft Windows operating systems.

OpenType Fonts (OTF)

OpenType is a format for scalable computer fonts. It was built on TrueType, and is a registered trademark of Microsoft. OpenType fonts are used commonly today on the major computer platforms.

The Web Open Font Format (WOFF)

WOFF is a font format for use in web pages. It was developed in 2009, and is now a W3C Recommendation. WOFF is essentially OpenType or TrueType with compression and additional metadata. The goal is to support font distribution from a server to a client over a network with bandwidth constraints.

The Web Open Font Format (WOFF 2.0)

TrueType/OpenType font that provides better compression than WOFF 1.0.

SVG Fonts/Shapes

SVG fonts allow SVG to be used as glyphs when displaying text. The SVG 1.1 specification define a font module that allows the creation of fonts within an SVG document. You can also apply CSS to SVG documents, and the @font-face rule can be applied to text in SVG documents.

Embedded OpenType Fonts (EOT)

EOT fonts are a compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages.

Browser Support for Font Formats

The numbers in the table specifies the first browser version that fully supports the font format.

*IE: The font format only works when set to be «installable».

Using The Font You Want

In the @font-face rule; first define a name for the font (e.g. myFirstFont) and then point to the font file.

Tip: Always use lowercase letters for the font URL. Uppercase letters can give unexpected results in IE.

To use the font for an HTML element, refer to the name of the font (myFirstFont) through the font-family property:

Example

@font-face <
font-family: myFirstFont;
src: url(sansation_light.woff);
>

div font-family: myFirstFont;
>

Using Bold Text

You must add another @font-face rule containing descriptors for bold text:

Example

The file «sansation_bold.woff» is another font file, that contains the bold characters for the Sansation font.

Browsers will use this whenever a piece of text with the font-family «myFirstFont» should render as bold.

This way you can have many @font-face rules for the same font.

CSS Font Descriptors

The following table lists all the font descriptors that can be defined inside the @font-face rule:

Источник

Font Code

The following font codes contain the word word «font» in their name eg, font-size , font-stretch etc.

Also see text codes, which are the properties that contain «text» in their name eg, text-transform , text-align etc.

The font Property

The font property is shorthand code that allows you to set multiple font properties in one go. The font property enables you to set the following properties: font-style , font-variant , font-weight , font-size , line-height , and font-family .

Sample text to demonstrate HTML font code.

The font-family Property

If you only need to set one or two font properties, you might prefer to use the explicit font property, rather than the shorthand property as outlined above.

The font-family property is probably the most common font property. It allows you to set the font family — often simply referred to as «font» (eg, «How do I change the font?»).

The font-family property enables you to change the font.

The font-size Property

To change the size of the font, you can use the font-size property. This property accepts various values, including a pixel size, points, percentage value, and more. Here are some examples of setting the font size using different values:

Font size using pixels (12px).

Font size using points (12pt).

Font size using a percentage value (130%).

Font size using an absolute value (medium).

Font size using a relative value (larger).

The font-weight Property

To set text to bold, use the font-weight property. Although this font code allows you to specify various levels of boldness, most browsers can only render two levels (bold and normal). Therefore, the most common values are bold and normal (which overrides any bold setting).

Here are some examples. If your browser doesn’t render these properly, you’ll probably only see two levels of bold.

Источник