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
Recommend
The difference between div and span in HTML (commonalities and differences)
Common points: The DIV tag and SPAN tag treat som...
In-depth understanding of mathematical expressions in CSS calc()
The mathematical expression calc() is a function ...
How to implement responsive layout with CSS
Implementing responsive layout with CSS Responsiv...
Detailed examples of the difference between methods watch and computed in Vue.js
Table of contents Preface introduce 1. Mechanism ...
Detailed explanation of object literals in JS
Table of contents Preface 1. Set the prototype on...
How to install elasticsearch and kibana in docker
Elasticsearch is very popular now, and many compa...
CSS sprites technology integrates multiple backgrounds into one PNG image CSS positioning
The image integration technology used by American...
Details of MutationObServer monitoring DOM elements in JavaScript
1. Basic Use It can be instantiated through the M...
CSS HACK for IE6/IE7/IE8/IE9/FF (summary)
Since I installed the official version of IE8.0, ...
Vue computed properties
Table of contents 1. Basic Examples 2. Computed p...
How to make CSS child elements highly consistent with parent elements
Absolute positioning method: (1) Set the parent e...
Detailed explanation of the execution process of JavaScript engine V8
Table of contents 1. V8 Source 2. V8 Service Targ...
mysql8.0 forgotten password modification and net command service name invalid problem
Enter net start mysql in cmd and the prompt is: T...
VUE + OPENLAYERS achieves real-time positioning function
Table of contents Preface 1. Define label style 2...
Detailed explanation of monitoring Jenkins process based on zabbix
1. Monitoring architecture diagram 2. Implementat...