字体的样式,分类

设置字体颜色:

使用color来设置文字的颜色

设置文字的大小:

浏览器中一般默认的文字大小都是16px,font-size设置的并不是文字本身的大小,在页面中,每个文字都是处在一个看不见的框中的,我们设置的font-size实际上是设置格的高度,并不是字体的大小,一般情况下文字都要比这个格要小一些,也有时会比格大,根据字体的不同,显示效果也不同

通过font-family可以指定文字的字体
当采用某种字体时,如果浏览器支持则使用该字体,如果字体不支持,则使用默认字体
该样式可以同时指定多个字体,多个字体之间使用“,”分开
当采用多个字体时,浏览器会优先使用前边的字体,如果前边没有,再尝试下一个

font-family: arial, 微软雅黑;

浏览器使用的字体默认就是计算机中的字体,如果计算机中有,则使用,如果没有就不用
在开发中,如果字体太奇怪,用的人太少了,尽量不要使用,有可能用户的电脑没有,就不能达到想要的效果

分类:

在网页中将字体分成5大类:

serif(衬线字体)
sans-serif(非衬线字体)
monospace (等宽字体)
cursive (草书字体)
fantasy (虚幻字体)
可以将字体设置为这些大的分类,浏览器会自动选择指定的字体,并应用样式
一般会将字体的大分类,指定为font-family中的最后一个字体
1.font-style可以用来设置文字的斜体
可选值:
normal 默认值,文字正常显示
italic 文字会以斜体显示
oblique 文字会以倾斜的效果显示
大部分浏览器都不会对倾斜和斜体做区分,也就是说我们设置italic和oblique效果是一样的
一般我们只会使用italic
2.font-weight可以用来设置文本的加粗效果
可选值:
normal 默认值,文字正常显示
bold 文字加粗显示
该样式也可以指定100-900之间的9个值
但是由于用户的计算机往往没有这么多级别的字体,所以200有可能比100粗,但也有可能是一样的
3.font-variant可以用来设置小型大写字母
可选值:
normal 默认值,文字正常显示
4.small-caps 文本以小型大写字母显示

小型大写字母:
将所有的字母都以大写形式显示,但是小写字母的小型大写,要比大写字母小一些
在CSS中还为我们提供了一个样式叫font,使用该样式可以同时设置字体相关的所有样式
可以将字体的样式值统一写在font样式中,不同的值之间使用空格隔开
使用font设置字体样式时,斜体 加粗 小大字母,没有顺序要求,甚至可写可不写,如果不写则使用默认值
但是要求文字的大小和字体必须写,而且字体必须是最后一个样式,大小必须是倒数第二个样式
实际上使用简写属性也会有一个比较好的性能

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 设置字体颜色: 使用color来设置文字的颜色 设置文字的大小: 浏览器中一般默认的文字大小都是16px,font...
    张露锋阅读 774评论 0 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,907评论 1 45
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 4,171评论 0 0
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 2,078评论 1 4
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,108评论 0 1