CSS commonly used font style to set the font of a variety of changes (example detailed explanation)

CSS font properties define the font family, size, bold, style (such as italics) and variant (such as small caps) of text. font-family controls the font. Since the fonts installed on each computer system are different, the three basic fonts are Heiti, Songti and Microsoft YaHei. Font-family is usually written like this: "Heiti", "Songti", "Microsoft YaHei"

Font-size controls the font size. We set the font size by setting its width. Its height is generally 16px by default on computer systems, so the font size should not be lower than 16px, 1em=16px; font-weight: bold;/*The font weight is generally 100-900, commonly used are lighter, normal, and bold*/As for font-style, the default is normal, which means normal. If you set font-style: italic; it has the same effect as <em></em>; If the line-height used for spacing between words is equal to the height, it will be vertically centered.

Usually the abbreviation of font font is: font: style weight size/line-height font-family /*The two required ones are size and font-family*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple transformations of commonly used CSS font styles</title>
    <style>
        div{
            font-family: 'Microsoft YaHei';/*Microsoft YaHei*/
            /* font-family: 'Lucida Sans','Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; */
            /*Add double quotes or single quotes to the font. When there are multiple fonts, separate them with commas*/
            color:#f90;
            font-size: 24px;/*Control font size*/
            font-weight: bold;/*Control font weight: lighter (lightweight), normal (normal), bold*/
            font-style: italic;/*same as em*/
            line-height: 30px;
        }
        /*font font abbreviation: font: style weight size/line-height font-family*/
        /*The two required ones are size font-family*/
        p{  
            font: 24px/1.5em 'Lucida Sans','Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
            letter-spacing: 1px;/*English letter spacing*/
            word-spacing: 10px;/*English word spacing*/
        }
        P::first-letter{
            text-transform: capitalize;
        }/*First letter::first-letter*/
        p::first-line{
            color:red;
        }/*First line::first-line*/
    </style>
</head>
<body>
    <div>Technology is king in this world. If you want to know if the view from the top of Qingtian Mountain is the best, then you must ask. Technology ...
        If you want to know if the view from the top of Qingtian Mountain is the best, in a world where technology is king, If you want to know if the view from the top of Qingtian Mountain is the best, in a world where technology is king, If you want to know if the view from the top of Qingtian Mountain is the best, in a world where technology is king,
        I want to ask if the view from the top of Qingtian Mountain is the best. In a world where technology is king, I want to ask if the view from the top of Qingtian Mountain is the best.</div>
    <p>Technology is king world, I want to ask if the scenery on the top of Qingtian Mountain is the king of technology, 
        I want to ask whether the scenery of Qingtian Peak is the king of technology. If the technology is the king of the world, 
        I would like to ask whether the scenery on the top of Qingtian Mountain is the king of the world. Is the scenery good?</p>
</body>
</html>

Summarize

The above is the various changes of font settings in the commonly used CSS styles introduced by the editor. I hope it will be helpful to everyone. Thank you very much for your support of the 123WORDPRESS.COM website!

<<: Building command line applications with JavaScript

>>: 3 different ways to clear the option options in the select tag