前言

由于自己在学习CSS的过程中会时不时忘记一些CSS字体样式的书写，因此在本文记录了一些常用的CSS字体样式的写法。

一、字体系列

使用font-family属性设置文本的字体系列。在使用的时候，如果字体系列的名称超过一个字，则必须用引号，例如：

font-family:"微软雅黑";

同时由于存在某些浏览器不支持某种字体的情况，因此该属性在使用时应该多设置几个字体名称作为一种备用，如果浏览器不支持第一种字体，则会尝试使用下一个字体，以此类推，例如：

font-famliy:"宋体","微软雅黑";

注意：
（1）上述的微软雅黑也可以用英文"Microsoft Yahei"来替代，一般用采用英文写法。
（2）尽量使用系统默认的自带字体，保证在任何浏览器中都可以正确显示。常见的字体有：“Microsoft Yahei”，tahoma，arial，“Hiragino Sans GB”。

二、字体大小

分类：

相对大小：相对于周围元素设置大小，允许用户在浏览器中改变文字大小。
绝对大小：设置一个指定大小的文本，不允许用户在所有浏览器中改变文字大小。

使用font-size属性定义字体大小，最常用的单位是px(像素)，例如：

font-size:6px;

注意：
（1）谷歌浏览器默认的文字大小是16px。
（2）为避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 代替px，例如：
font-size:2.5em;
又1em=16px，因此可通过px/16=em这个公式将像素转换为em。
（3）通常用百分比设置body的默认字体大小，例如：
font-size:100%;

三、字体粗细

使用font-weight属性设置文本的字体粗细，其参数包括如下：

normal：默认值，定义标准字符，相当于number为400，声明此值时将取消之前任何设置。
bold：粗体，相当于number为700
bolder：IE5+ 特粗体
lighter：IE5+ 细体
number：IE5+ 100|200|300|400|500|600|700|800|900（没有单位）

例如：

font-weight:normal;
font-weight:400;

上边两种写法等价。

注意：
（1）实际开发中，常用数字来进行文字的加粗和变细。
（2）font-weight属性还有一个属性值inherit，表示规定字体粗细从父元素继承。

四、字体样式

使用font-style属性设置文本的字体样式，其参数包括如下：

normal：默认值，标准的字体样式。
italic：斜体的字体样式。
oblique：倾斜的字体样式。
inherit：继承父元素的字体样式。

例如：

font-style:normal;

注意：
针对em或i标签，可以用font-style:normal;使其不倾斜字体。

五、字体复合属性写法

使用font简写属性在一个声明中设置所有字体属性，属性设置顺序如下：

font:font-style font-weight font-size/line-height font-family;

例如：

font:italic 700 16px "宋体";
font:16px "宋体";

注意：
（1）font-size属性和font-family属性是必须的，如果缺少其他值则将会自动使用默认值。
（2）line-height属性用来设置行高。

总结

以上就是有关常用字体样式的笔记内容，希望对各位有所帮助，作者也在学习中，如有解释不清楚或有误的地方，还请各位指正。

最详细的CSS字体样式总结（font-family、font-size、font-weight、font-style等）相关推荐

CSS字体样式（font）[详细]
CSS字体样式(font) 1. font-family 2. font-style 3. font-weight 4. font-size 5. font-variant 6. font CSS 中 ...
CSS字体样式属性（font-size、font-family、Unicode、font-weight、font-style、font）
CSS字体样式属性 font-size:字号大小 font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位.其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度 ...
常见的CSS字体样式属性/font-size/font-family/font-weight/font-style/font综合属性/@font-face属性/学习笔记
一.常见的CSS字体样式属性 1.font-size属性:用于设置字体字号该属性的值有相对长度单位:em(相对当前对象内文本字体尺寸)px(像素,最常用) 绝对长度单位:in(英寸)cm(厘米)m ...
css 字体样式设置
css字体样式(Font Style),属性时间:2014-05-08 21:49 来源:我爱学习网 | 作者:我爱学习网 | 本文已影响 68353 人 css字体样式(Font Style)是网 ...
css字体样式 1204
css字体样式 1204 字体大小样式 font-size:字体大小 font-size: 20px; 字体家族 font-family:字体1名称,字体n名称 font-family: 华文行楷; ...
CSS基础——CSS字体样式属性【学习笔记】
CSS字体样式属性调试工具 font字体 CSS外观属性快捷操作emmet语法练习案例-体育页面 1.font字体 1.1 font-size:大小作用: font-size属性用于设置字号 p ...
html中样式属性有哪些,css字体样式属性有哪些？
css字体样式属性有:1.font-size:字号大小.2.font-family:规定元素的字体系列.3.font-weight:字体粗细.4.font-style:字体风格.5.font:综合设置 ...
css字体样式，选择器，外观属性
css字体样式,选择器,外观属性字体样式 ont-size:字号大小 font-family:字体 css unicode 字体 font-weight:字体粗细 font-style:字体风格 f ...
JavaEE——CSS字体样式
2019独角兽企业重金招聘Python工程师标准>>> 声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权:凯哥学堂旨在促进VIP学员互相学习的基础 ...

最详细的CSS字体样式总结（font-family、font-size、font-weight、font-style等）

文章目录

前言