current position：Home>HTML text elements and CSS font processing

HTML text elements and CSS font processing

2021-08-26 19:59:17 【A bowl week】

This is my participation 8 The fourth of the yuegengwen challenge 22 God , Check out the activity details ：8 Yuegengwen challenge

Hello Hello everyone , I am a A bowl week , Not the one you think “ A cup of porridge ”, It's a front end that doesn't want to be drunk ‍, If I'm lucky enough to get your favor , I'm very lucky ~

This is a 【 Learn from scratch 】 Chapter 18 of the series -《CSS Font processing and HTML Elements about text in 》

This series of articles starts at nuggets , It is not easy to reprint. Please get permission

Write it at the front

In this article, we will HTML About text elements and CSS Font processing in , Through this article, you can master the following contents ：

00_ Reading guide .png

HTML Provides elements about text

HTML There are two main types of text elements provided in , As follows ：

  • Structured elements ： It refers to elements with clear meaning and function .

  • Semantic elements ： Semantic elements also refer to elements with meaning , The difference is that semantic elements define more words 、 The semantics or style of a line of content .

Structured elements

HTML The structural elements provided are shown in the following table ：

Elements describe
<h1>~<h6> Title element ,<h1> Highest level .
<p> Paragraph elements
<b> Bold elements
<i> Tilt elements
<sup> Superscript element
<sub> Subscript element
<br> Line break
<hr> Level
<article> Article container element ( No default style )
<section> Chapter container elements ( No default style )
<nav> Navigation container elements
aside> Side description elements
<header> Head area container
<main> Body area container
<footer> Bottom area container

That's all HTML Structured elements provided in , Now let's look at these elements in HTML Specific effects in ：

Now let's see <h1>~<h6>、<p> Elements and other elements , The sample code is as follows ：

<!DOCTYPE html>
<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> First level title </h1>
    <h2> Secondary title </h2>
    <h3> Three level title </h3>
    <h4> The fourth level title </h4>
    <h5> Five level titles </h5>
    <p> This is a passage </p>
    <b> This is a bold text </b>
    <!--  Line break  -->
    <br>
    <i> This is an oblique text </i>
    <!--  Split line  -->
    <hr>
    <p>
        <sup> Superscript </sup> written words 
        <sub> Subscript </sub>
    </p>
    <h6> Six level title </h6>
</body>

</html>
 Copy code

The code runs as follows ：

01_ Text elements .png

Semantic elements

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

Elements semantics According to the effect
<strong> Bold elements Bold font effect
<em> Emphasize elements Font tilt effect
<blockquote> and <q> Reference effect First line indent effect
<cite> Citation effect Font tilt effect
<dfn> Define the element Font tilt effect ( Some browsers have no effect )
<address> The address element Font tilt effect
<del> and <ins> Content modification element Font strikeout effect and underline effect

That's all HTMl About semantic elements provided in , The specific effect of its elements, let's take a look at its browser effect .

The sample code is as follows ：

<!DOCTYPE html>
<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 elements </title>
</head>

<body>
    <strong> This is the bold element </strong>
    <em> Emphasize effect </em>
    <blockquote> Reference element </blockquote>
    <cite> Citation elements </cite>
    <dfn> Define the element </dfn>
    <address> The address element </address>
    <del> Delete line element </del>
    <ins> Underline element </ins>
</body>

</html>
 Copy code

The code runs as follows ：

02_ Semantic elements .png

HTML Whitespace handling and escape characters in

Blank handling

When the browser runs and parses HTML When the page is , When two or more consecutive spaces are encountered , If you don't deal with spaces , Just show it as a space , This feature is called Empty space collapse .

The sample code is as follows ：

<!DOCTYPE html>
<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 handling </title>
</head>

<body>
    <p> This is a paragraph.   written words </p>
    <p> This is a paragraph.    written words </p>
</body>

</html>
 Copy code

The code runs as follows ：

03_ Blank handling .png

In the above code , the second <p> There are two spaces in the element , Better than the first <p> One more element , But the display effect is the same .

Escape character

stay HTML The characters in <、>、"、' and & And so on are special characters , They are HTML A part of grammar itself . If you want to run in the browser HTML The page presents these special characters , Must be used by Escape character To achieve .

literal character describe Escape character
Space &nbsp;
< Less than no. &lt;
> More than no. &gt;
& And no. &amp;
" quotes &quot;
Copyright &copy;
Registered trademark &reg;
trademark &trade;
× Multiplication sign &times;
÷ devide &divide;

The sample code is as follows ：

<!DOCTYPE html>
<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  of use  &lt;p&gt;  To define paragraph elements </p>
    </body>
</html>

 Copy code

The code runs as follows ：

04_ Escape character .png

Font style

CSS The operation of font in is mainly to set the font thickness 、 Size, etc .CSS The operation of fonts in is mainly through font attribute , This attribute can be split into the following attributes ：

  • font-family attribute

  • font-size attribute

  • font-weight attribute

  • font-style attribute

HTTP:

CSS Medium font-family Property can be set through a list of font names or font family names HTML The font in the page . The live sample code is as follows ：

<!DOCTYPE html>
<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:  Song style ; } </style>
    </head>
    <body>
        <p> Use the default font p Elements </p>
        <p id="p"> Use the specified font p Elements </p>
    </body>
</html>

 Copy code

The code runs as follows ：

05_ HTTP: .png

font-family Property can not only set a font name , It can also set multiple font names ( Font family name ), Separated by commas . When setting multiple , The browser will use its font in turn . The sample code is as follows ：

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

font size

CSS Pass through font-size To set the font size , Its attribute value can be set to a variety of values , The details can be obtained through MDN see , In actual development , Only absolute units px And relative units rem、em.

The sample code is as follows ：

<!DOCTYPE html>
<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> 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 code

The code runs as follows ：

06_ font size .png

Font thickness and tilt

CSS Through font-weight Property to set the font thickness , The value of this property can be 100~900 It can also be normal( And 400 Equivalent ) perhaps bold( And 700 Equivalent ) Two values .

adopt font-style To set the font tilt , Its attribute value can be italic perhaps oblique.

It is worth noting that , You can set the thickness and inclination on the premise that the font includes this font style .

The sample code is as follows ：

<!DOCTYPE html>
<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 inclination </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 code

The code runs as follows ：

07_ Thickness and inclination .png

font attribute

CSS Medium font Attributes can be short for which of the above attributes , Specific grammar can refer to MDN. However, the shorthand attribute is used in actual development , Readability is not very good .

@font-face The rules

@font-face Rules are used in HTML Embed Fonts , Used in HTML Introduce online fonts into the page . The grammatical 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 code

The specific contents of the above grammatical structure are as follows ：

  • font-family： The specified font name will be used for font or font-family attribute .

  • src： adopt url() Function to specify the location of the remote font file , Or by local() The function specifies the font on the user's local computer .

  • font-variant： Same as font-variant attribute .

  • font-stretch： Same as font-stretch attribute .

  • font-weight： Same as font-weight attribute .

  • font-style： Same as font-style attribute .

The above grammar rules are taken from MDN

The following example code shows font Property usage ：

@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 code

summary

summary .png

Notice ： In the next article, we will study CSS Text processing in

copyright notice
author[A bowl week],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210826195912276t.html

The sidebar is recommended

guess what you like

Random recommended