일반적으로 사용되는 13가지 CSS 글꼴 스타일 속성 중 어떤 속성을 알고 있나요?

이 글에서는 글꼴 스타일을 설정할 때 일반적으로 사용되는 몇 가지 CSS 글꼴 스타일 속성을 소개합니다.

1. CSS 글꼴 스타일 속성

1.1 글꼴 크기 글꼴 크기

font-size 字体大小
1. font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。

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

2. 现在网页中普遍使用14px+
3. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
4. 其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。具体如下：

1.2 font-family字体样式

1. font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅 黑，可以使用如下CSS样式代码：

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

2. 各种字体之间必须使用英文状态下的逗号隔开。
3. 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
4. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: “Times New Roman”;。
5. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
6. 一般网页中用的较多的字体为 arial，此字体是乔布斯研发的

1.3 CSS Unicode字体

1. 在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。xp 系统不支持 类似微软雅黑的中文。

2. 方案一： 你可以使用英文来替代。 比如 font-family:“Microsoft Yahei”。

3. 方案二： 在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。 font-family: “5FAE8F6F96C59ED1”，表示设置字体为“微软雅黑”。



4. 可以通过escape() 来测试属于什么字体。

   体名称	英文名称	Unicode 编码
   宋体	SimSun	5B8B4F53
   新宋体	NSimSun	65B05B8B4F53
   黑体	SimHei	9ED14F53
   微软雅黑	Microsoft YaHei	5FAE8F6F96C59ED1
   楷体GB2312	KaiTiGB2312	69774F53_GB2312
   隶书	LiSu	96B64E66
   幼圆	YouYuan	5E7C5706
   华文细黑	STXihei	534E65877EC69ED1
   细明体	MingLiU	7EC6660E4F53

注:为了照顾不同电脑的字体安装问题，我们尽量只使用宋体和微软雅黑中文字体

1.4 font-weight 字体粗细

1. 字体加粗除了用 b 和 strong 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。
2. 拓展： strong元素，默认加粗。strong元素表示重要的不能忽略的内容

   属性	属性值	作用
   font-weight:	normal（简写400）	不加粗
   	bold（简写700）	加粗
   	100~900（100的整倍数）	数值越大字体越粗

注：css 数字 400 等价于 normal，而 700 等价于 bold。 但是我们更喜欢用数字来表示。

1.5 font-style 字体风格

1. 字体倾斜除了用 i 和 em 标签之外，可以使用CSS 来实现，但是CSS글꼴 크기 속성 글꼴 크기를 설정하는 데 사용됩니다. 이 속성의 값은 상대 길이 단위 또는 절대 길이 단위를 사용할 수 있습니다.

   选择器{
   	font: font-style font-weight font-size/line-height font-family;}// font:style weight size/行高 字体类型，大小和类型不能省略

2. 요즘 웹페이지에서는 14px+가 일반적으로 사용됩니다글꼴 크기를 짝수로 사용해 보세요. IE6과 같은 오래된 브라우저에서는 홀수를 지원할 때 버그가 있습니다. 1.2 font-family글꼴 스타일
   다양한 글꼴 영어에서는 쉼표로 구분해야 합니다. 중국어 글꼴은 영어로 인용해야 하지만, 영어 글꼴은 일반적으로 인용할 필요가 없습니다. 영어 글꼴을 설정해야 하는 경우 영어 글꼴 이름이 중국어 글꼴 이름 앞에 와야 합니다. 1.3 CSS Unicode 글꼴
   CSS에서 글꼴 이름을 설정하고 중국어를 직접 작성해 보세요. 그러나 파일 인코딩(GB2312, UTF-8 등)이 일치하지 않으면 왜곡된 오류가 발생합니다. XP 시스템은 Microsoft Yahei와 유사한 중국어를 지원하지 않습니다. 옵션 1: 대신 영어를 사용해도 됩니다. 예를 들어 글꼴 모음: "Microsoft Yahei"입니다. 옵션 2: 유니코드 인코딩을 직접 사용하여 CSS에 글꼴 이름을 작성하면 이러한 오류를 피할 수 있습니다. 유니코드를 사용하여 중국어 글꼴 이름을 작성하면 브라우저가 이를 올바르게 구문 분석할 수 있습니다. 글꼴 계열: "5FAE8F6F96C59ED1"은 글꼴을 "Microsoft Yahei"로 설정하는 것을 의미합니다.

   그 중에서 상대 길이 단위가 더 일반적으로 사용되며, 픽셀 단위 px를 권장하는 반면 절대 길이 단위는 거의 사용되지 않습니다. 자세한 내용은 다음과 같습니다.		font-family 속성은 글꼴을 설정하는 데 사용됩니다. 웹 페이지에서 일반적으로 사용되는 글꼴에는 Song Dynamise, Microsoft YaHei, HeiTi 등이 있습니다. 예를 들어 웹 페이지의 모든 단락 텍스트 글꼴을 Microsoft YaHei로 설정하려면 다음 CSS 스타일을 사용할 수 있습니다. 코드: p{ letter-spacing : 2px;}
   글꼴 이름에 공백, #, $ 등과 같은 기호가 포함된 경우 영어의 경우 글꼴을 작은따옴표나 큰따옴표로 묶어야 합니다(예: 글꼴 계열: “Times New Roman”;).	모든 사용자의 브라우저에서 올바르게 표시될 수 있도록 시스템 기본 글꼴을 사용해 보세요.	웹 페이지에서 가장 일반적으로 사용되는 글꼴은 Steve Jobs가 개발한 arial입니다.

   🎜 🎜🎜escape()를 사용하여 해당 글꼴이 어떤 글꼴에 속하는지 테스트할 수 있습니다. 🎜🎜🎜🎜🎜유형명🎜🎜영문명🎜🎜유니코드 인코딩🎜🎜🎜🎜🎜🎜SimSun🎜🎜5B8B4F53🎜🎜🎜🎜New Song Dynasty🎜 🎜NSimSun🎜 🎜65B05B8B4F53🎜🎜🎜🎜黑体🎜🎜심헤이🎜🎜 9ED14F53🎜 🎜🎜🎜Microsoft YaHei🎜🎜Microsoft YaHei🎜🎜5FAE8F6F96C59ED1🎜🎜🎜🎜楷体GB2312🎜🎜KaiTiGB2312🎜🎜69774F53_GB2 312🎜 🎜🎜🎜공식 스크립트🎜🎜LiSu🎜🎜96B64E66🎜🎜🎜🎜Youyuan🎜🎜YouYuan🎜🎜5E7C5706 🎜🎜 🎜🎜차이니즈 파인 블랙🎜🎜STXihei🎜🎜534E65877EC69ED1🎜🎜🎜🎜파인 바디🎜🎜MingLiU🎜🎜7EC6660E4F53🎜🎜🎜🎜 🎜
🎜참고: 다양한 컴퓨터에서 글꼴 설치 문제를 해결하기 위해 우리는 Song Dynasty 및 Microsoft Yahei 중국어 글꼴만 사용하려면🎜🎜🎜1.4 font-weight 글꼴 두께
🎜글꼴은 굵게 표시(b 사용 제외) strong 태그 외에도 CSS를 사용하여 이를 달성할 수 있지만 CSS에는 의미가 없습니다. 🎜🎜확장: 강력한 요소, 기본적으로 볼드체. 강한 요소는 무시할 수 없는 중요한 콘텐츠를 나타냅니다.🎜🎜🎜🎜Attribute🎜🎜속성 값🎜🎜Function🎜🎜🎜🎜🎜🎜font-weight:🎜🎜normal(약어 400)🎜🎜굵게 표시되지 않음🎜🎜🎜🎜bold (약어 700)🎜🎜Bold🎜🎜🎜🎜100~900(100의 정수배)🎜🎜값이 클수록 글꼴이 굵어집니다🎜🎜🎜🎜🎜
🎜참고: CSS 번호 400은 일반과 동일합니다. 700 등. 굵은 글씨로 가격이 책정되었습니다. 그러나 우리는 그것을 숫자로 표현하는 것을 선호합니다. 🎜🎜🎜1.5 font-style 글꼴 스타일
🎜i 및 em 태그를 제외한 글꼴 기울임꼴 그렇지 않으면 CSS를 사용하여 이를 달성할 수 있지만 CSS에는 의미가 없습니다. 🎜🎜확장: i 요소로 표현되는 언어: 이 텍스트는 실제 사용 시 일반적으로 아이콘을 나타내는 데 사용됩니다. 🎜🎜font -style:🎜🎜normal🎜🎜기본값, 브라우저는 표준 글꼴 스타일을 표시합니다🎜🎜🎜🎜italic🎜🎜브라우저는 기울임꼴 글꼴 스타일을 표시합니다🎜🎜🎜🎜oblique🎜🎜브라우저는 기울임꼴을 표시합니다 글꼴 스타일🎜 🎜🎜🎜

注：平时我们很少给文字加斜体，反而喜欢给斜体标签（em，i）改为普通模式

1.6 font 文字属性速写 (重点)

1. font属性用于对字体样式进行综合设置，其基本语法格式如下：

   选择器{
   	font: font-style font-weight font-size/line-height font-family;}// font:style weight size/行高 字体类型，大小和类型不能省略

2. 使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
3. 注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

1.7 letter-spacing 字体间距

1. letter-spacing就是文字与文字间的间距，值可以负数，默认值normal

   p{
   	letter-spacing : 2px;}

1.8 text-decoration 文本修饰：加线

1. line-through：穿过文字，表示中间加条线
2. overline：上面加条线（少用）
3. underline：下面加条线
4. none：表示没有线，去掉线
5. 拓展： del、s元素默认中间加线；del元素表示废弃、错误的内容；s元素表示过期的内容；a元素默认下面加线，表示超链接

1.9 text-indent 首行文本缩进

1. px：缩进多少像素
2. em：缩进几个字体（中英文缩进宽度值一样）

2.0 line-height 文本行高/垂直居中

1. 每行文本的高度，该值越大，每行文本的值越大
2. 设置行高为容器高度，可以让单行文本垂直居中，容器高度为如：height：50px
3. 行高可以设置为纯数字，表示相对于当前元素的字体大小。如取值1.5:行高为文字的1.5倍，这样文字在放大的时候，行高也在变大，不会出现文字重叠现象

2.1 letter-spacing 文字间隙

1. em：每个文字间隔几个字体宽度
2. px：每个文字间隔几个像素

2.2 text-align 文字、行盒、行块盒水平排列方式

1. left：靠左，默认靠左排列
2. center：居中
3. right：靠右

2.3 网页的最小和最大宽度

1. 设置在body元素的css里
2. min-width: 1000px 最小像素
3. max-width: 1500px 最大像素

（学习视频分享：css视频教程）

위 내용은 일반적으로 사용되는 13가지 CSS 글꼴 스타일 속성 중 어떤 속성을 알고 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!