13 commonly used CSS font style attributes, which ones do you know?

This article brings you some css font style attributes, which are commonly used when setting font styles. I hope it will be helpful to you.

1. CSS font style properties

1.1 font-size Font size

1. font-sizeThe attribute is used to set the font size. The value of this attribute can use relative length units or absolute length units.

   font-size: 14px; // px 绝对像素单位font-size: 1em; // 相对父元素字体大小单位// 注：每个元素必须有字体大小，如果没有申明，则直接使用父元素的字体大小//    如果没有父元素（html）则使用基准字号，基准字号为浏览器里设置的字号

2. Nowadays, 14px is commonly used in web pages.
3. Try to use an even number of font sizes. Old browsers such as IE6 will have bugs when supporting odd numbers.
4. Among them, the relative length unit is more commonly used, and the pixel unit px is recommended, while the absolute length unit is rarely used. The details are as follows:

1.2 font-familyFont style

1. font-family attribute To set the font. Commonly used fonts in web pages include Song Dynasty, Microsoft YaHei, HeiTi, etc. For example, to set the font of all paragraphs of text in the web page to Microsoft YaHei, you can use the following CSS style code:

    p{ 
    	font-family:"微软雅黑";
    }
    // 注: 可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。

2. Various fonts must be separated by commas in English.
3. Chinese fonts require quotation marks in English, while English fonts generally do not require quotation marks. When you need to set an English font, the English font name must precede the Chinese font name.
4. If the font name contains spaces, #, $ and other symbols, the font must be enclosed in single quotes or double quotes in English, for example, font-family: “Times New Roman”;.
5. Try to use the system default font to ensure that it can be displayed correctly in any user's browser.
6. The most commonly used font in web pages is arial, which was developed by Steve Jobs

##1.3 CSS UnicodeFont

1. Set the font name in

   CSS and write Chinese directly. However, garbled errors will occur when the file encoding (GB2312, UTF-8, etc.) does not match. XP system does not support Chinese similar to Microsoft Yahei.

2. Option 1: You can use English instead. For example, font-family: "Microsoft Yahei".

3. Option 2: Directly using Unicode encoding to write font names in CSS can avoid these errors. Use Unicode to write Chinese font names, and the browser can parse them correctly. font-family: "\5FAE\8F6F\96C5\9ED1" means setting the font to "Microsoft Yahei".

4. You can use escape() to test what font it belongs to.
   Type nameEnglish nameUnicode encoding# #宋体新宋体黑体Microsoft亚黑Italian GB2312 Official ScriptYouyuan华文丝黑XIMINGTI

   SimSun	\5B8B\4F53
   NSimSun	\65B0\5B8B \4F53
   SimHei	\9ED1\4F53
   Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
   KaiTiGB2312	\6977\4F53_GB2312
   LiSu	\96B6\4E66
   YouYuan	\5E7C\5706
   STXihei	\534E\6587\7EC6\9ED1
   MingLiU	\7EC6\660E\4F53

Note: In order to take care of the font installation problems on different computers, we try to only use Song Dynasty and Microsoft Yahei Chinese fonts

1.4

font-weight Font weight

In addition to using

b
1. and strong tags, CSS can be used to make the font bold, but CSS It has no semantic meaning. Extension: strong element, bold by default. The strong element represents important content that cannot be ignored
2. Attributefont-weight:bold (abbreviation 700)100~900 (integer multiples of 100)

   Attribute value	Function
   normal (abbreviation 400)	No bold
   	Bold
   	The larger the value, the bolder the font

Note: The css number 400 is equivalent to normal, and 700 is equivalent to bold. But we prefer to express it in numbers.

1.5

font-style Font style

Italic font except using

i
1. and em# In addition to the ## tag, CSS can be used to achieve this, but CSS has no semantics. Expansion: The language expressed by the i element: This text is a special text. In actual use, it is usually used to represent an icon.
2. AttributeAttribute valueFunction##font-style:normal The browser will display the italic font style The browser will display an italic font style

   Default value , the browser will display the standard font style		italic
   		oblique
   		注：平时我们很少给文字加斜体，反而喜欢给斜体标签（em，i）改为普通模式 1.6 font 文字属性速写 (重点) font属性用于对字体样式进行综合设置，其基本语法格式如下： 选择器{ font: font-style font-weight font-size/line-height font-family;}// font:style weight size/行高 字体类型，大小和类型不能省略 使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。 注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。 1.7 letter-spacing 字体间距 letter-spacing就是文字与文字间的间距，值可以负数，默认值normal p{ letter-spacing : 2px;} 1.8 text-decoration 文本修饰：加线 line-through：穿过文字，表示中间加条线 overline：上面加条线（少用） underline：下面加条线 none：表示没有线，去掉线 拓展： del、s元素默认中间加线；del元素表示废弃、错误的内容；s元素表示过期的内容；a元素默认下面加线，表示超链接 1.9 text-indent 首行文本缩进 px：缩进多少像素 em：缩进几个字体（中英文缩进宽度值一样） 2.0 line-height 文本行高/垂直居中 每行文本的高度，该值越大，每行文本的值越大 设置行高为容器高度，可以让单行文本垂直居中，容器高度为如：height：50px 行高可以设置为纯数字，表示相对于当前元素的字体大小。如取值1.5:行高为文字的1.5倍，这样文字在放大的时候，行高也在变大，不会出现文字重叠现象 2.1 letter-spacing 文字间隙 em：每个文字间隔几个字体宽度 px：每个文字间隔几个像素 2.2 text-align 文字、行盒、行块盒水平排列方式 left：靠左，默认靠左排列 center：居中 right：靠右 2.3 网页的最小和最大宽度 设置在body元素的css里 min-width: 1000px 最小像素 max-width: 1500px 最大像素 （学习视频分享：css视频教程）

The above is the detailed content of 13 commonly used CSS font style attributes, which ones do you know?. For more information, please follow other related articles on the PHP Chinese website!