美文网首页
前端-06 字体的样式 分类

前端-06 字体的样式 分类

作者: 张露锋 | 来源:发表于2018-11-21 09:16 被阅读0次

设置字体颜色:

  • 使用color来设置文字的颜色

设置文字的大小:

  • 浏览器中一般默认的文字大小都是16px,font-size设置的并不是文字本身的大小,在页面中,每个文字都是处在一个看不见的框中的,我们设置的font-size实际上是设置格的高度,并不是字体的大小,一般情况下文字都要比这个格要小一些,也有时会比格大,根据字体的不同,显示效果也不同
  • 通过font-family可以指定文字的字体
    当采用某种字体时,如果浏览器支持则使用该字体,如果字体不支持,则使用默认字体
    该样式可以同时指定多个字体,多个字体之间使用“,”分开
    当采用多个字体时,浏览器会优先使用前边的字体,如果前边没有,再尝试下一个
    font-family: arial, 微软雅黑;
    

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

分类:

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

serif(衬线字体)
sans-serif(非衬线字体)
monospace (等宽字体)
cursive (草书字体)
fantasy (虚幻字体)
可以将字体设置为这些大的分类,浏览器会自动选择指定的字体,并应用样式
一般会将字体的大分类,指定为font-family中的最后一个字体

  • font-style可以用来设置文字的斜体
    可选值:
    normal 默认值,文字正常显示
    italic 文字会以斜体显示
    oblique 文字会以倾斜的效果显示
    大部分浏览器都不会对倾斜和斜体做区分,也就是说我们设置italic和oblique效果是一样的
    一般我们只会使用italic
  • font-weight可以用来设置文本的加粗效果
    可选值:
    normal 默认值,文字正常显示
    bold 文字加粗显示
    该样式也可以指定100-900之间的9个值
    但是由于用户的计算机往往没有这么多级别的字体,所以200有可能比100粗,但也有可能是一样的
  • font-variant可以用来设置小型大写字母
    可选值:
    normal 默认值,文字正常显示
  • small-caps 文本以小型大写字母显示
    小型大写字母:
    将所有的字母都以大写形式显示,但是小写字母的小型大写,要比大写字母小一些

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

相关文章

  • 前端-06 字体的样式 分类

    设置字体颜色: 使用color来设置文字的颜色 设置文字的大小: 浏览器中一般默认的文字大小都是16px,font...

  • HTML03-day

    文本标签 列表 颜色单位 字体分类 字体样式 行间距 颜色单位 字体其他样式 文本样式

  • 文本标签and文本样式

    改变字体样式:font-family:字体名称 字体分类: 字体类型: 背景颜色: 文本样式: 文本标签 列表:有...

  • 前端笔记(3)

    代码:(1)列表 (2)单位 (3)字体的样式 (4)字体的分类 (5)字体的其它样式 (6)文本标签 (7)文本...

  • 字体的样式,分类

    设置字体颜色: 使用color来设置文字的颜色 设置文字的大小: 浏览器中一般默认的文字大小都是16px,font...

  • css--文本标签、列表、单位、颜色单位、字体的样式、字体分类、

    1、文本标签 2、列表 3、单位 4、颜色的单位 5、字体的样式 6、字体分类 7、字体的其他样式 8、行间距 9...

  • 文本标签;样式及盒子模型

    (1)文本标签: (2)列表: (3)单位: (4)颜色单位: (5)字体的样式: (6)字体的分类: (7)字体...

  • 2018-11-20

    颜色的单位 使用RGB值来表示不同的颜色 字体的样式 通过font-family可以指定文字的字体 字体的分类 在...

  • 3.CSS入门(2) 字体样式 列表样式 伪类

    字体样式 源文件路径 我的网盘>前端入门的第N次>CSS入门

  • 2018-06-04

    字体的样式 CSS 属性: 字体样式(Font Style) 1 字体样式 {font:font-style fo...

网友评论

      本文标题:前端-06 字体的样式 分类

      本文链接:https://www.haomeiwen.com/subject/bikqqqtx.html