兄弟连 JavaWeb_042_CSS字体

第讲字体第42讲：CSS课程大纲•1、CSS 字体•2、指定字体•3、字体风格•4、字体加粗•5、字体大小1、CSS 字体•在CSS 中，有两种不同类型的字体系列名称：•通用字体系列-拥有相似外观的字体系统组合（比如"Serif" 或"Monospace"）•特定字体系列-具体的字体系列（比如"Times" 或"Courier"）•除了各种特定的字体系列外，CSS 定义了5 种通用字体系列：•Serif 字体•Sans-serif 字体•Monospace 字体•Cursive 字体Fantasy 字体•Fantasy2、指定字体1.使用font-family 属性定义文本的字体系列。

•如果你希望文档使用一种sans-serif 字体，但是你并不关心是哪一种字体，以下就是一个合适的声明：•body {font-family: sans-serif;}•这样用户代理就会从sans-serif 字体系列中选择一个字体（如Helvetica），并将其应用到body 元素。

因为有继承，这种字体选择还将应用到body 元素中包含的所有元素，除非有一种更特定的选择器将其覆盖。

3、字体风格•font-style 属性最常用于规定斜体文本。

•该属性有三个值：•normal -文本正常显示•italic -文本斜体显示•oblique -文本倾斜显示1.p.normal {font-style:normal;}2.p.italic {font-style:italic;}3.p.oblique {font style:oblique;}p.oblique{font-style:oblique;}italic 和oblique 文本在web 浏览器中看上去完全一样。

中看上去完全样。

4、字体加粗•font-weight 属性设置文本的粗细。

css中引入字体文件的方式
在CSS中引入字体文件有几种常见的方式。

首先是使用@font-face规则，在CSS文件中定义自定义字体，然后将其应用于网页中的元素。

这种方法允许开发者使用他们自己的字体，而不仅仅依赖于用户计算机上已安装的字体。

另一种方式是使用链接外部字体文件。

开发者可以通过在CSS 文件中使用@import规则或者在HTML文件中使用<link>标签来链接外部字体文件，这样就可以在网页中使用这些字体。

此外，还可以使用font-family属性来引用Web字体。

Web字体是通过网络引入的字体，可以通过在CSS文件中指定字体的URL 来引入。

最后，还可以使用字体提供商的服务，如Google Fonts或Adobe Fonts等，这些服务提供了大量免费的Web字体供开发者使用，开发者只需在网页中引入提供的链接即可使用这些字体。

总的来说，CSS中引入字体文件的方式有多种选择，开发者可以根据自己的需求和偏好来选择合适的方式来引入字体文件。

css字体样式设置⼤全字体属性：(font)⼤⼩ {font-size: x-large;}(特⼤) xx-small;(极⼩) ⼀般中⽂⽤不到，只要⽤数值就可以，单位：PX、PD样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)⾏⾼ {line-height: normal;}(正常) 单位：PX、PD、EM粗细 {font-weight: bold;}(粗体) lighter;(细体) normal;(正常)变体 {font-variant: small-caps;}(⼩型⼤写字母) normal;(正常)⼤⼩写 {text-transform: capitalize;}(⾸字母⼤写) uppercase;(⼤写) lowercase;(⼩写) none;(⽆)修饰 {text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)常⽤字体： (font-family)"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana背景属性： (background)⾊彩 {}图⽚ {background-image: url();}重复 {background-repeat: no-repeat;}滚动 {background-attachment: fixed;}(固定) scroll;(滚动)位置 {background-position: left;}(⽔平) top(垂直);简写⽅法 {background:#000 url(..) repeat fixed left top;} /*简写·这个在阅读代码中经常出现，要认真的研究*/区块属性： (Block) /*这个属性第⼀次认识，要多多研究*/字间距 {letter-spacing: normal;} 数值 /*这个属性似乎有⽤，多实践下*/对齐 {text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中)缩进 {text-indent: 数值px;}垂直对齐 {vertical-align: baseline;}(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;词间距word-spacing: normal; 数值空格white-space: pre;(保留) nowrap;(不换⾏)显⽰ {display:block;}(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题) /*display 属性的了解很模糊*/⽅框属性： (Box)width:; height:; float:; clear:both; margin:; padding:; 顺序：上右下左边框属性： (Border)border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;border-width:; 边框宽度border-color:#;简写⽅法border：width style color; /*简写*/列表属性： (List-style)类型list-style-type: disc;(圆点) circle;(圆圈) square;(⽅块) decimal;(数字) lower-roman;(⼩罗码数字) upper-roman; lower-alpha; upper-alpha;位置list-style-position: outside;(外) inside;图像list-style-image: url(..);定位属性： (Position)Position: absolute; relative; static; visibility: inherit; visible; hidden;overflow: visible; hidden; scroll; auto;clip: rect(12px,auto,12px,auto) (裁切)css属性代码⼤全⼀ CSS⽂字属性：color : #999999; /*⽂字颜⾊*/font-family : 宋体,sans-serif; /*⽂字字体*/font-size : 9pt; /*⽂字⼤⼩*/font-style:itelic; /*⽂字斜体*/font-variant:small-caps; /*⼩字体*/letter-spacing : 1pt; /*字间距离*/line-height : 200%; /*设置⾏⾼*/font-weight:bold; /*⽂字粗体*/vertical-align:sub; /*下标字*/vertical-align:super; /*上标字*/text-decoration:line-through; /*加删除线*/text-decoration: overline; /*加顶线*/text-decoration:underline; /*加下划线*/text-decoration:none; /*删除链接下划线*/text-transform : capitalize; /*⾸字⼤写*/text-transform : uppercase; /*英⽂⼤写*/text-transform : lowercase; /*英⽂⼩写*/text-align:right; /*⽂字右对齐*/text-align:left; /*⽂字左对齐*/text-align:center; /*⽂字居中对齐*/text-align:justify; /*⽂字分散对齐*/vertical-align属性vertical-align:top; /*垂直向上对齐*/vertical-align:bottom; /*垂直向下对齐*/ vertical-align:middle; /*垂直居中对齐*/ vertical-align:text-top; /*⽂字垂直向上对齐*/ vertical-align:text-bottom; /*⽂字垂直向下对齐*/⼆、CSS边框空⽩padding-top:10px; /*上边框留空⽩*/padding-right:10px; /*右边框留空⽩*/ padding-bottom:10px; /*下边框留空⽩*/padding-left:10px; /*左边框留空⽩三、CSS符号属性：list-style-type:none; /*不编号*/list-style-type:decimal; /*阿拉伯数字*/list-style-type:lower-roman; /*⼩写罗马数字*/list-style-type:upper-roman; /*⼤写罗马数字*/list-style-type:lower-alpha; /*⼩写英⽂字母*/list-style-type:upper-alpha; /*⼤写英⽂字母*/list-style-type:disc; /*实⼼圆形符号*/list-style-type:circle; /*空⼼圆形符号*/list-style-type:square; /*实⼼⽅形符号*/list-style-image:url(/dot.gif); /*图⽚式符号*/list-style-position: outside; /*凸排*/list-style-position:inside; /*缩进*/四、CSS背景样式：/*背景颜⾊*/background:transparent; /*透视背景*/background-image : url(/image/bg.gif); /*背景图⽚*/ background-attachment : fixed; /*浮⽔印固定背景*/ background-repeat : repeat; /*重复排列-⽹页默认*/ background-repeat : no-repeat; /*不重复排列*/ background-repeat : repeat-x; /*在x轴重复排列*/ background-repeat : repeat-y; /*在y轴重复排列*/指定背景位置background-position : 90% 90%; /*背景图⽚x与y轴的位置*/ background-position : top; /*向上对齐*/background-position : buttom; /*向下对齐*/ background-position : left; /*向左对齐*/background-position : right; /*向右对齐*/background-position : center; /*居中对齐*/五、CSS连接属性：a /*所有超链接*/a:link /*超链接⽂字格式*/a:visited /*浏览过的链接⽂字格式*/a:active /*按下链接的格式*/a:hover /*⿏标转到链接*/⿏标光标样式：链接⼿指 CURSOR: hand⼗字体 cursor:crosshair箭头朝下 cursor:s-resize⼗字箭头 cursor:move箭头朝右 cursor:move加⼀问号 cursor:help箭头朝左 cursor:w-resize箭头朝上 cursor:n-resize箭头朝右上 cursor:ne-resize箭头朝左上 cursor:nw-resize⽂字I型 cursor:text箭头斜右下 cursor:se-resize箭头斜左下 cursor:sw-resize漏⽃ cursor:wait光标图案(IE6) p {cursor:url("光标⽂件名.cur"),text;}六、CSS框线⼀览表：border-top : 1px solid #6699cc; /*上框线*/border-bottom : 1px solid #6699cc; /*下框线*/ border-left : 1px solid #6699cc; /*左框线*/border-right : 1px solid #6699cc; /*右框线*/以上是建议书写⽅式,但也可以使⽤常规的⽅式如下: border-top-color : #369 /*设置上框线top颜⾊*/ border-top-width :1px /*设置上框线top宽度*/ border-top-style : solid/*设置上框线top样式*/其他框线样式solid /*实线框*/dotted /*虚线框*/double /*双线框*/groove /*⽴体内凸框*/ridge /*⽴体浮雕框*/inset /*凹框*/outset /*凸框*/七、CSS表单运⽤：⽂字⽅块按钮复选框选择钮多⾏⽂字⽅块下拉式菜单选项1选项2⼋、CSS边界样式：margin-top:10px; /*上边界*/margin-right:10px; /*右边界值*/margin-bottom:10px; /*下边界值*/margin-left:10px; /*左边界值*/CSS 属性：字体样式(Font Style)序号中⽂说明标记语法1 字体样式 {font:font-style font-variant font-weight font-size font-family}2 字体类型 {font-family:"字体1","字体2","字体3",...}3 字体⼤⼩ {font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}4 字体风格 {font-style:inherit|italic|normal|oblique}5 字体粗细 {font-weight:100-900|bold|bolder|lighter|normal;}6 字体颜⾊ {color:数值;}7 阴影颜⾊ {text-shadow:16位⾊值}8 字体⾏⾼ {line-height:数值|inherit|normal;}9 字间距 {letter-spacing:数值|inherit|normal}10 单词间距 {word-spacing:数值|inherit|normal}11 字体变形 {font-variant:inherit|normal|small-cps }12 英⽂转换 {text-transform:inherit|none|capitalize|uppercase|lowercase}13 字体变形 {font-size-adjust:inherit|none}14 字体 {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}⽂本样式(Text Style)序号中⽂说明标记语法1 ⾏间距 {line-height:数值|inherit|normal;}2 ⽂本修饰 {text-decoration:inherit|none|underline|overline|line-through|blink}3 段⾸空格 {text-indent:数值|inherit}4 ⽔平对齐 {text-align:left|right|center|justify}5 垂直对齐 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}6 书写⽅式 {writing-mode:lr-tb|tb-rl}背景样式序号中⽂说明标记语法1 背景颜⾊ {">2 背景图⽚ {background-image: url(URL)|none}3 背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4 背景固定 {background-attachment:fixed|scroll}5 背景定位 {background-position:数值|top|bottom|left|right|center}6 背影样式 {background:背景颜⾊|背景图象|背景重复|背景附件|背景位置}框架样式(Box Style)序号中⽂说明标记语法1 边界留⽩ {margin:margin-top margin-right margin-bottom margin-left}2 补 ⽩ {padding:padding-top padding-right padding-bottom padding-left}3 边框宽度 {border-width:border-top-width border-right-width border-bottom-width border-left-width} 宽度值： thin|medium|thick|数值4 边框颜⾊ {border-color:数值数值数值数值} 数值：分别代表top、right、bottom、left颜⾊值5 边框风格 {border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}6 边 框 {border:border-width border-style color}上边框 {border-top:border-top-width border-style color}右边框 {border-right:border-right-width border-style color}下边框 {border-bottom:border-bottom-width border-style color}左边框 {border-left:border-left-width border-style color}7 宽 度 {width:长度|百分⽐| auto}8 ⾼ 度 {height:数值|auto}9 漂 浮 {float:left|right|none}10 清 除 {clear:none|left|right|both}分类列表序号中⽂说明标记语法1 控制显⽰ {display:none|block|inline|list-item}2 控制空⽩ {white-space:normal|pre|nowarp}3 符号列表 {list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}4 图形列表 {list-style-image:URL}5 位置列表 {list-style-position:inside|outside}6 ⽬录列表 {list-style:⽬录样式类型|⽬录样式位置|url}7 ⿏标形状 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}。

css字体样式css字体样式font-size ：字体⼤⼩font-size属性⽤于设置字号，该属性的值可以使⽤相对单位长度，也可以使⽤绝对单位长度。

相对长度单位说明em相对当前对象内⽂本的字体尺⼨px像素最常⽤推荐使⽤绝对长度单位说明in英⼨cm厘⽶mm毫⽶pt点font-family：字体font-family属性⽤于设置字体。

⽹页中常⽤的字体有宋体、微软雅⿊、⿊体等，例如将⽹页中所有的段落⽂本的字体变⿊，可以使⽤css样式代码：p {font-family: "微软雅⿊";}1.现在⽹页中普遍使⽤14px+。

2.尽量使⽤偶数字号的字体.ie6等⽼数浏览器⽀持奇数号字体有bug3.各种字体之间必须使⽤英⽂状态下的逗号隔开。

4.中⽂字体需要加英⽂状态下的符号，英⽂字体⼀般不需要加引号。

当需要设置引英⽂字体时，英⽂字体名必须位于中英⽂字体名之间。

5.如果字体名中包含空格、#、$等符号时，则该字体必须加英⽂状态下的单引号或双引号，如`font-family："times new roman"`6.尽量使⽤系统默认字体，保证在任何⽤户浏览器中都能正确显⽰unicode字体浏览器兼容性好，去编码表中查看对⽤字体font-weight：粗细bold：加粗normal：正常bolder：特粗体lighter：细体400：相当于normal 正常700：相当于bold 加粗font-style：字体样式normal：正常italic：斜体oblique：倾斜的字体字体连写格式：选择器 {font：font-style font-weight font-size/line-height font-family；}font-size和font-family是必写项字体的外观属性color：⽂本颜⾊color属性⽤于定义⽂本的颜⾊，其取值⽅式有3中：预定义颜⾊值：如red、green、blue等⼗六进制，如#FF0000、FF6600等RGB代码，如红⾊可以⽤rgb(255,0,0)line-height:⾏间距line-height属性⽤于设置⾏间距，就是⾏与⾏之间的距离，即字符的垂直间距，⼀般为⾏⾼。

CSS文本样式的技巧知识点CSS文本样式是网页设计中必不可少的一部分，通过合适的文本样式可以提升网页的可读性和美观度。

本文将介绍一些常用的CSS文本样式的技巧知识点，帮助您更好地运用CSS来设计网页的文本。

一、字体样式字体样式是CSS文本样式中最基本的部分。

通过设置字体的相关属性，可以改变字体的外观。

以下是一些常用的字体样式技巧：1. 字体族：通过设置字体族属性，可以指定网页中所使用的字体。

例如，可以通过设置font-family属性为"Arial, sans-serif"来指定网页中的字体为Arial，如果用户的电脑上没有安装Arial字体，则会使用sans-serif作为替代字体。

2. 字体大小：通过设置font-size属性，可以改变字体的大小。

常用的单位有像素（px）、百分比（%）和EM。

例如，可以设置font-size: 16px来指定字体大小为16像素。

3. 字体样式：通过设置font-style属性，可以改变字体的样式，常用的值包括normal（默认样式）、italic（斜体）和oblique（倾斜）。

例如，可以设置font-style: italic来让字体呈现斜体效果。

二、文本修饰文本修饰可以让字体在视觉上更加突出或者强调。

以下是一些常用的文本修饰技巧：1. 文本颜色：通过设置color属性，可以改变文本的颜色。

可以使用具体的颜色值（如#FF0000表示红色）或者预定义的颜色名称（如red表示红色）。

2. 文本加粗：通过设置font-weight属性，可以让文本加粗。

常用的值有normal（默认样式）和bold（加粗样式）。

例如，可以设置font-weight: bold来让文本加粗。

3. 文本下划线：通过设置text-decoration属性，可以在文本下面加上下划线。

常用的值有none（无下划线）、underline（下划线）和overline（上划线）。

CSS字体样式 定义字体的各个属性，可以让页⾯板式变得更好看。

字体样式包括字体类型、⼤⼩、颜⾊基本效果，另外还包括⼀些特殊的样式，如字体粗细、下划线、斜体、⼤⼩写样式等。

⼀、定义字体类型 font-family 属性⽤于设置字体。

⽹页中常⽤的字体有宋体、微软雅⿊、⿊体等。

语法：font-family:name; name：表⽰字体名称，可以使⽤多种字体，中间以逗号隔开，表⽰如果浏览器不⽀持第⼀个字体，则会尝试下⼀个，直到找到合适的字体。

　常⽤技巧： 1. 现在⽹页中普遍使⽤14px+。

2. 尽量使⽤偶数的数字字号。

ie6 等⽼式浏览器⽀持奇数会有 bug。

3. 各种字体之间必须使⽤英⽂状态下的逗号隔开。

4. 中⽂字体需要加英⽂状态下的引号，英⽂字体⼀般不需要加引号。

当需要设置英⽂字体时，英⽂字体名必须位于中⽂字体名之前。

5. 如果字体名中包含空格、#、$等符号，则该字体必须加英⽂状态下的单引号或双引号，例如 font-family: "Times New Roman";。

6. 尽量使⽤系统默认字体，保证在任何⽤户的浏览器中都能正确显⽰。

font:综合设置字体样式 (重点) font 是⼀个符合属性，该属性能够设置多种字体属性。

语法：font: font-style | font-variant | font-weight | font-size/line-height | font-family 使⽤font属性时，必须按上⾯语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。

注意：其中不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则font属性将不起作⽤。

扩展：Unicode 字体 在 CSS 中设置字体名称，直接写中⽂是可以的。

但是在⽂件编码（GB2312、UTF-8 等）不匹配时会产⽣乱码的错误。

css常用字体样式（最新版）目录1.CSS 字体样式概述2.常用字体样式分类3.具体字体样式介绍3.1 宋体3.2 黑体3.3 楷体3.4 仿宋3.5 微软雅黑3.6 Arial3.7 Verdana3.8 浏览器默认字体正文【CSS 字体样式概述】CSS 字体样式是用于控制网页中文本显示样式的一种 CSS 属性。

通过设置不同的字体样式，可以实现个性化的网页设计，提高用户体验。

CSS 中常用的字体样式包括宋体、黑体、楷体、仿宋、微软雅黑等。

【常用字体样式分类】根据字体的不同风格和用途，CSS 字体样式可以分为以下几类：1.中文字体：如宋体、黑体、楷体、仿宋等；2.英文字体：如 Arial、Verdana 等；3.浏览器默认字体：如 Times New Roman、Helvetica 等。

【具体字体样式介绍】【3.1 宋体】宋体是一种中文字体，笔画简洁、清晰，适合用于正文内容。

在 CSS 中，可以这样设置：```cssbody {font-family: "宋体", sans-serif;}```【3.2 黑体】黑体是一种中文字体，笔画粗黑，对比度高，适用于标题和突出显示的文字。

在 CSS 中，可以这样设置：```cssh1 {font-family: "黑体", sans-serif;}```【3.3 楷体】楷体是一种中文字体，笔画优美，具有较强的书法韵味，适用于较为正式的文档。

在 CSS 中，可以这样设置：```cssp {font-family: "楷体", sans-serif;}```【3.4 仿宋】仿宋是一种中文字体，介于宋体和黑体之间，既有宋体的优雅，又有黑体的清晰。

在 CSS 中，可以这样设置：```cssfont {font-family: "仿宋", sans-serif;}```【3.5 微软雅黑】微软雅黑是一种中文字体，由微软公司开发，具有现代感和较高的识别度。

css常用字体样式摘要：一、CSS 字体样式概述1.CSS 字体样式的作用2.常用的字体样式属性二、字体系列1.字体系列的概念2.常用的字体系列属性三、字体加粗与斜体1.加粗属性2.斜体属性四、字体大小与行高1.字体大小属性2.行高属性五、字体样式应用实例1.实例代码2.效果展示正文：一、CSS 字体样式概述CSS 字体样式是网页设计中至关重要的一个环节，它能够帮助我们设置文本的字体、大小、颜色等属性，使网页内容更加美观、易读。

在CSS 中，有许多属性可以用来控制字体样式，例如：font-family、font-size、font-style、font-weight 等。

二、常用的字体样式属性1.font-family：用于设置文本的字体系列。

2.font-size：用于设置文本的大小。

3.font-style：用于设置文本的样式，如：斜体、正常等。

4.font-weight：用于设置文本的粗细。

三、字体系列1.字体系列的概念：字体系列是指一组具有相似外观的字体。

例如：Arial、Verdana、Georgia 等都属于不同的字体系列。

2.常用的字体系列属性：- serif：用于设置带有衬线的字体系列。

- sans-serif：用于设置无衬线的字体系列。

- monospace：用于设置等宽字体系列。

- cursive：用于设置草书字体系列。

- fantasy：用于设置梦幻字体系列。

- icon：用于设置图标字体系列。

四、字体加粗与斜体1.加粗属性：通过设置font-weight 属性，可以实现字体的加粗效果。

例如：font-weight: bold;。

2.斜体属性：通过设置font-style 属性，可以实现字体的斜体效果。

例如：font-style: italic;。

五、字体大小与行高1.字体大小属性：通过设置font-size 属性，可以调整文本的大小。

例如：font-size: 16px;。

CSS常⽤字体样式属性CSS常⽤字体样式属性font-size:字号⼤⼩font-size属性⽤于设置字号，该属性的值可以使⽤相对长度单位，也可以使⽤绝对长度单位。

其中，相对长度单位⽐较常⽤，推荐使⽤像素单位px，绝对长度单位使⽤较少。

font-family:字体font-family属性⽤于设置字体。

⽹页中常⽤的字体有宋体、微软雅⿊、⿊体等可以同时指定多个字体，中间以逗号隔开，表⽰如果浏览器不⽀持第⼀个字体，则会尝试下⼀个，直到找到合适的字体1. 现在⽹页中普遍使⽤14px+。

2. 尽量使⽤偶数的数字字号。

ie6等⽼式浏览器⽀持奇数会有bug。

3. 各种字体之间必须使⽤英⽂状态下的逗号隔开。

4. 中⽂字体需要加英⽂状态下的引号，英⽂字体⼀般不需要加引号。

当需要设置英⽂字体时，英⽂字体名必须位于中⽂字体名之前。

5. 如果字体名中包含空格、#、$等符号，则该字体必须加英⽂状态下的单引号或双引号，例如font-family: "Times New Roman";。

6. 尽量使⽤系统默认字体，保证在任何⽤户的浏览器中都能正确显⽰。

CSS Unicode字体在 CSS 中设置字体名称，直接写中⽂是可以的。

但是在⽂件编码（GB2312、UTF-8 等）不匹配时会产⽣乱码的错误⽅案⼀：你可以使⽤英⽂来替代。

⽐如 font-family:"Microsoft Yahei"。

⽅案⼆：在 CSS 直接使⽤ Unicode 编码来写字体名称可以避免这些错误。

使⽤ Unicode 写中⽂字体名称，浏览器是可以正确的解析的。

font-family: "\5FAE\8F6F\96C5\9ED1"，表⽰设置字体为“微软雅⿊”。

字体名称英⽂名称Unicode 编码宋体SimSun\5B8B\4F53新宋体NSimSun\65B0\5B8B\4F53⿊体SimHei\9ED1\4F53微软雅⿊Microsoft YaHei\5FAE\8F6F\96C5\9ED1楷体_GB2312KaiTi_GB2312\6977\4F53_GB2312⾪书LiSu\96B6\4E66幼园YouYuan\5E7C\5706华⽂细⿊STXihei\534E\6587\7EC6\9ED1细明体MingLiU\7EC6\660E\4F53新细明体PMingLiU\65B0\7EC6\660E\4F53font-weight:字体粗细字体加粗除了⽤ b 和 strong 标签之外，可以使⽤CSS 来实现，但是CSS 是没有语义的。

CSS 字体设计涵盖了字体样式、字体大小、字体颜色、字体对齐等多个方面。

下面是一个简单的 CSS 字体设计案例，展示了如何使用 CSS 来定制网页中的文字样式：
HTML 结构：
CSS 样式（styles.css）：
解释：
1.字体选择：
–font-family属性用于设置整个页面的字体，这里选择了 'Arial' 字体作为主要字体，如果用户设备上没有 Arial 字体，则会使用 sans-serif 作
为后备字体。

2.背景与颜色：
–background-color用于设置背景颜色，color用于设置文本颜色。

3.文本对齐：
–text-align属性设置文本在容器中的对齐方式，这里设置为居中对齐。

4.盒模型与圆角：
–使用margin控制元素与周围元素的间距，padding用于设置元素内边距。

border-radius设置了圆角。

5.标题样式：
–font-size控制标题的。