This is the 22nd day of my participation in the August Wen Challenge.More challenges in August

Hello everyone, I am a bowl of zhou, not you think of the “bowl of porridge”, is a front-end do not want to be drunk 👨🏻💻, if I write an article lucky can get your favor, very lucky ~

This is the 20th article in the “Learn from the Front End” series – “CSS for font processing and HTML about text elements”.

This series of articles in the nuggets first, preparation is not easy to reprint please obtain permission

Writing in the front

In this article we will look at the processing of text elements in HTML and fonts in CSS. Through this article we can learn the following:

An element in HTML that provides information about text

There are two main types of text elements provided in HTML, as follows:

  • Structured elements: Elements that have a clear meaning and function.

  • Semantically defined elements: Semantically defined elements are also elements that have meaning. The difference is that semantically defined elements define the semantics or style of a word or line of content.

Structural element

HTML provides the following structured elements:

The element describe
<h1>~<h6> The title element,<h1>Highest level.
<p> Paragraph element
<b> Bold elements
<i> Tilted elements
<sup> Superscript elements
<sub> The subscript elements
<br> A newline
<hr> A horizontal line
<article> Article container elements (no default styles)
<section> Section container elements (no default styles)
<nav> Navigation container element
aside> Side description elements
<header> Header container
<main> Body area container
<footer> Bottom area container

These are the structured elements provided in HTML. Now let’s look at how these elements look in HTML:

Now let’s look at the effects of

~

,

elements and so on. The sample code looks like this:

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Text elements</title>
</head>

<body>
    <h1>Primary title</h1>
    <h2>The secondary title</h2>
    <h3>Level 3 title</h3>
    <h4>Level 4 titles</h4>
    <h5>Five titles</h5>
    <p>This is a text</p>
    <b>This is a bold paragraph</b>
    <! -- -- -- > a new line
    <br>
    <i>This is a slanted passage</i>
    <! -->
    <hr>
    <p>
        <sup>superscript</sup>The text<sub>The subscript</sub>
    </p>
    <h6>Six levels of headings</h6>
</body>

</html>
Copy the code

The code looks like this:

Semantic element

The semantic elements provided in HTML are shown in the following table:

The element The semantic According to the effect
<strong> Bold elements Font bold effect
<em> Emphasize elements Font tilt effect
<blockquote>and<q> Reference effect Indent effect on the first line
<cite> Effect of citation Font tilt effect
<dfn> Define the elements Font tilt effect (some browsers have no effect)
<address> Address elements Font tilt effect
<del>and<ins> Content modification element Font strikeout effect and underline effect

So that’s the semanticized element in HTMl. Let’s take a look at the browser effect of the element.

The sample code looks like this:

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Semantic element</title>
</head>

<body>
    <strong>This is the bold element</strong>
    <em>Effect of stress</em>
    <blockquote>References to elements</blockquote>
    <cite>Citation elements</cite>
    <dfn>Define the elements</dfn>
    <address>Address elements</address>
    <del>Delete line element</del>
    <ins>Underline element</ins>
</body>

</html>
Copy the code

The code looks like this:

Whitespace handling and escape characters in HTML

Blank processing

When a browser runs and parses an HTML page and encounters two or more consecutive Spaces, it displays them as a single space, if not whitespace, a feature called whitespace folding.

The sample code looks like this:

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Blank processing</title>
</head>

<body>
    <p>This is a text</p>
    <p>This is a text</p>
</body>

</html>
Copy the code

The code looks like this:

In the code above, there are two Spaces in the second

element, one more than in the first

element, but the effect is the same.

Escape character

The characters <, >, “, ‘, and & in HTML are special characters that are part of the HTML syntax itself. If you want to render these special characters in an HTML page running in a browser, you must do so by using escape characters.

The original meaning character describe Escape character
The blank space &nbsp;
< Less than no. &lt;
> More than no. &gt;
& And no. &amp;
" quotes &quot;
© copyright &copy;
® The registered trademark &reg;
™ The trademark &trade;
x Multiplication sign &times;
present devide &divide;

The sample code looks like this:

<! DOCTYPEhtml>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
        <title>Escape character</title>
    </head>

    <body>
        <p>HTML is used&lt;p&gt;To define paragraph elements</p>
    </body>
</html>

Copy the code

The code looks like this:

Font style

The operations on fonts in the CSS are mainly to set the thickness and size of fonts. Font operations in THE CSS are performed through the font property, which can be split into the following properties:

  • The font-family property

  • The font – the size attribute

  • The font – weight attribute

  • The font and style attributes

HTTP:

The font-family property in the CSS sets the font in the HTML page using a list of font names or font family names. The living example code looks like this:

<! DOCTYPEhtml>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
        <title>HTTP:</title>
        <style>
            #p {
                font-family: the song typeface. }</style>
    </head>
    <body>
        <p>Use the p element of the default font</p>
        <p id="p">Uses the p element of the specified font</p>
    </body>
</html>

Copy the code

The code looks like this:

The font-family property can set not only one font name, but also multiple font names (font family names), separated by commas. When you set multiple fonts, the browser uses each font in turn. The sample code looks like this:

p {
  font-family: 'Franklin Gothic Medium'.'Arial Narrow', Arial, sans-serif;
}
Copy the code

The font size

Font size is used to set the font size in the CSS. The property value of the font can be set in a variety of ways, which can be viewed through MDN. In actual development, there are only absolute units px and relative units REM and EM.

Example code is as follows:

<! DOCTYPEhtml>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
        <title>The font size</title>
        <style>
            #p {
                font-size: 24px;
            }
        </style>
    </head>
    <body>
        <p>Default font size</p>
        <p id="p">Specify font size</p>
    </body>
</html>

Copy the code

The code looks like this:

Font thickness and slant

You can use the font-weight property to set the font thickness in the CSS. The value of this property can be 100 to 900, Normal (equivalent to 400), or bold(equivalent to 700).

Font tilt is set using a font style, which can be ITALic or oblique.

It is important to note that you can set the thickness and tilt only if the font includes such glyphs.

The sample code looks like this:

<! DOCTYPEhtml>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
        <title>Thickness and tilt</title>
        <style>
            .bold {
                font-weight: bold;
            }
            .italic {
                font-style: italic;
            }
        </style>
    </head>
    <body>
        <p class="bold">Font bold processing</p>
        <p class="italic">Font tilt processing</p>
    </body>
</html>

Copy the code

The code looks like this:

The font properties

The FONT attribute in the CSS can be a shorthand attribute of the preceding attributes. For details, see MDN. However, in real development, the shorthand properties are not very readable.

@ the font the forum rules

The @font-face rule is used to embed fonts in HTML, which is used to introduce online fonts into HTML pages. The syntax rules are as follows:

@font-face {
  [ font-family: <family-name>; ] ||
  [ src: <src>; ] ||
  [ unicode-range: <unicode-range>; ] ||
  [ font-variant: <font-variant>; ] ||
  [ font-feature-settings: <font-feature-settings>; ] ||
  [ font-variation-settings: <font-variation-settings>; ] ||
  [ font-stretch: <font-stretch>; ] ||
  [ font-weight: <font-weight>; ] ||
  [ font-style: <font-style>; ]
}
Copy the code

The syntax structure is as follows:

  • Font-family: The specified font name will be used for the font or font-family property.

  • SRC: Specify the location of the remote font file via the URL () function, or the font on the user’s local computer via the local() function.

  • Font-variant: Same as the font-variant property.

  • Font-stretch: the same property as font-stretch.

  • Font-weight: same as the font-weight attribute.

  • Font-style: same as the font-style attribute.

The above grammar rules are taken from MDN

The following example code shows the use of the font property:

@font-face {
  font-family: 'Varela Round';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/varelaround/v13/w8gdH283Tvk__Lua32TysjIfp8uP.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
  font-family: 'Varela Round', serif
}
Copy the code

conclusion

Preview: In the next article we’ll look at text processing in CSS