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

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

Mini Program natively implements left-slide drawer menu

Detailed explanation of MySQL locks (table locks, row locks, shared locks, exclusive locks, gap locks)

Using front-end HTML+CSS+JS to develop a simple TODOLIST function (notepad)

Docker Tutorial: Using Containers (Simple Example)

Learn MySQL execution plan

Solve the problem of blocking positioning DDL in MySQL 5.7

How to upload projects to Code Cloud in Linux system

A brief discussion on spaces and blank lines in HTML code

Even a novice can understand the difference between typeof and instanceof in js

Best Practices for MySQL Upgrades

Recommend

Vue + element to dynamically display background data to options

vue+rem custom carousel effect

Install MySQL in Ubuntu 18.04 (Graphical Tutorial)

MySQL 8.0.25 decompression version installation and configuration method graphic tutorial

Detailed explanation of Nginx's control over access volume

Website front-end performance optimization: JavaScript and CSS

Use image to submit the form instead of using button to submit the form

Detailed explanation of CSS child element fixed positioning solution relative to parent element

Detailed installation process of MySQL 8.0 Windows zip package version

What is BFC? How to clear floats using CSS pseudo elements

A brief discussion on the differences between FTP, FTPS and SFTP

HTML hyperlink a tag_Powernode Java Academy

Usage of mysql timestamp

After Apache is installed, the service cannot be started (error code 1 appears when starting the service)

Detailed explanation of Docker's most commonly used image commands and container commands