Skip to Content

CSS字体样式

字体颜色

color属性可设置文本内容的前景色，color属性主要可以用英语单词、十六进制、rgb()、rgba()等表示法。

英语单词表示法

比如color: red; ，仅仅用于学习时临时设置一下颜色，工作时基本不用这样的形式，因为追求精确。

十六进制表示法

十六进制表示法是所有设计软件中都通用的颜色表示法，设计师给我们的设计图上面标注的颜色，通常为十六进制表示。

color: #ff0000; 比如十六进制ff就是十进制的255，每种颜色分量都是0~255的数字。如果颜色值是#aabbcc的形式，可以简写为#abc。黑色是#000，白色是#fff，常见的灰色有#ccc、#333、 #2f2f2f等。

rgb()表示法

颜色也可以用rgb()表示法，color: rgb(255, 0, 0);

rgba()表示法

颜色也可以用rgba()表示法，最后一个参数表示透明度，介于0到1之间，0表示纯透明，1表示纯实心，color: rgba(255, 0, 0, .65); ，rgba()表示法从IE9开始兼容。

字体大小

font-size属性用来设置字号，单位通常为px。还有em、rem单位。

网页文字正文字号通常是16px，浏览器最小支持10px字号

  • 属性名：font-size
  • 取值：数字 + px
font-size: 30px;

网页文字正文字号通常是16px，浏览器最小支持10px字号

字体粗细

font-weight属性设置字体的粗细程度，通常就用normal和bold两个值

示例意义
font-weight: normal;正常粗细，与400等值
font-weight: bold;加粗，与700等值
font-weight: lighter;更细，大多数中文字体不支持
font-weight: bolder;更粗，大多数中文字体不支持

不是所有字体都提供了九种粗细，因此部分取值页面中无变化。如果使用数字的话，值为100-900的整百数。

设置字体

font-family属性用于设置字体，font-family: "微软雅黑"; ，字体可以是列表形式，一般英语字体放到前面，后面的字体是前面的字体的“后备”字体 font-family: serif, "Times New Roman", "微软雅黑"; （字体名称中有空格，必须用引号包裹）

中文字体也可以称呼它们的英语名字。

font-family: "微软雅黑"
font-family: "Microsoft Yahei"
 
font-family: "宋体"
font-family: "SimSun"

字体通常必须是用户计算机中已经安装好的字体，所以一般来说设置为微软雅黑和宋体较多，设置成其他字体较少，必须自己定义新字体，这就需要我们有字体文件，用户加载网页的时候，会同时下载这些字体文件。

  1. 如果字体名称中存在多个单词，推荐使用引号包裹
  2. 最后一项字体系列不需要引号包裹
  3. 网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示

定义字体

字体文件根据操作系统和浏览器不同，有eot、woff2、woff、ttf、svg文件格式，需要同时有这5种文件。

当我们拥有字体文件之后，就可以用@font-face定义字体。

@font-face {
    font-family: '字体名称';
    font-display: swap;
    src: url('eot字体文件地址');
    src: url('eot字体文件地址') format('embedded-opentype'),
        url('woff2字体文件地址') format('woff2'),
        url('woff字体文件地址') format('woff'),
        url('ttf字体文件地址') format('truetype'),
        url('svg字体文件地址') format('svg');
}

阿里巴巴普惠体

阿里巴巴提供了一套免费商用授权的普惠字体，网址：https://www.iconfont.cn/webfont  使用阿里巴巴普惠字体也省去了下载字体的麻烦。

如果线上字体包含所有中文汉字的话，加载网页速度的时间会变慢，所以可以生成自己想要的文本的字体，一般用来做标题等等，正文内容不是很建议使用。

CSS文本样式

Last updated on