CSS-文本视觉

Posted on   |   In   |  

本文介绍 CSS 文本的样式控制

字体样式

字体选择是一个常见重要的特性，设置字体属性也是 CSS 最常见的用途之一。但是，目前还没有一种办法能够确保所有的 Web 页面上使用同一种字体
在编写样式表的时候，开发人员能够为 html 文档指定一种字体 例如： Times New Roman, 但用户机器上并没有安装这种字体， 浏览器就无法显示该种字体
如果说有设计师想在浏览器上选定一种特定的字体，请拒绝

字体选择

字体选择可以使用 属性 font-family 来实现
例如 body { font-family: “Microsoft Yahei”; }, 此时浏览器会选择 微软雅黑(加入用户机器安装了该字体)， 作为 body 元素字体， 并且body元素的后代元素会继承该属性
如果 body 后代中的某个元素想要换个字体，可以重新制定字体元素
例如： h1,h2,h5 { font-family: arial; }, 此时浏览器会给 h1, h2, h5 使用 arial 标签
假如用户机器上没有安装 arial 字体，浏览器将会使用默认字体显示 h1,h2,h5 元素, 但是这个可以通过一些方式来做一些弥补
h1,h2,h5 { font-family: arial, Sans-serif, “Hiragino Sans GB”; }, 这中方式告诉浏览器 如果 arial 字体不可用，就选择 Sans-serif, 如果还不可用，就选择”Hiragino Sans GB”, 如此依次往下选择。根据这一原理，一般 font-family 规则中都提供一个通用字体系列：

1
2
3
body{  
    font-family: "Microsoft Yahei",tahoma,arial,"Hiragino Sans GB","helvetica neue",helvetica,arial,Sans-serif,"Hiragino Sans GB","Hiragino Sans GB W3","SimHei";
}

从上例可以看出，有些字体名称加了引号，有些没加， 有个共同的特点是，加了引号的字体名中都有空格。 更严格的说： 当一个字体名中有一个或多个空格，或这字体名中包括 #, $, %之类的特殊字符，都要使用引号将字体名括起来
加引号只是一种推荐做法，并不强制

字体加粗

字体加粗使用属性： font-weight, 其属性值可以为： normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900, inherit。 default： normal.
100 ~ 900 这9个数字关键子是为了映射字体设计的一个常见的特性，即为字体指定了9级加粗级别。如果一种字体内置了这些加粗级别， 那么这些数字就直接映射到与定义的级别，100 最细， 900最粗。
100 ~ 900 数字本身没有固定的加粗级别，根据 CSS 规范： 每个数字对应一个加粗级别， 至少与前一个数指定的加粗读相同。一般而言： 100, 200, 300, 400 对应较细字体， 500,600对应较粗字体，700,800,900对应很粗字体。
假设 A 字体及其各个级别的粗细

字体 关键字 数字级别
A Light – 100，200,300
A Regular normal 400
A Medium – 500
A bold bold 600,700
A Black – 800
A UltraBlack – 900

如果一个标为Medium的变形是唯一可用的变形， 他不会指定为500, 而是 400 。

字体加粗级别小于9种时，浏览器会以一种特定方式替补空白：

  • 如果没有 500 的加粗级别，此时 400 与 500 的加粗程度相同
  • 如果没有 300 的加粗级别， 则为 300 指定一个比 400 更细的粗度级别， 如果没有更细的，那就 300 与 400 相同。 200, 100 也是如此类推
  • 如果没有 600 的加粗级别， 则为 600 指定一个比 400 更粗的粗度级别， 如果没有， 那就 600 与 500(400) 相同. 700, 800, 900 如此类推

例如： 如果字体 B 只有两种加粗级别

字体 关键字 数字级别
B Regular normal 100，200,300,400,500
B Bold bold 600,700,800,900

之前提到的属性值 normal 等价于 400, bold 等价于 700。其他数字不对应其他任何属性值

让字体更粗/更细

使用 font-weight: bolder 规则， 来为元素设置一个比其所继承的父元素粗度级别更粗的级别
例如： 

1
2
3
4
5
6
7
8
9
10
11
p { font-weight: normal; }
p em { font-weight: bolder; }  
h1 { font-weight: bold;}
h1 b { font-weight: bolder;}
p { font-weight: blod;}
p span { font-weight: lighter; } 
p { font-weight: 300;}
p i { font-weight: lighter; }

1、 em 从祖先元素继承的加粗级别为 normal(400) ，因此其加粗级别跃迁为 bold(700)
2、b 从祖先元素继承的加粗级别为 bold(700), 已经没有更粗的字体了， 就把 b 的加粗级别设置为下一个更大的数值： 800
3、span 从祖先元素继承的加粗级别为 bold(700), 则其加粗级别跃迁为 normal(400)
4、i 从祖先元素继承的加粗级别为 300, 已经没有更细的字体了， i的加粗级别设置为 200
font-bolder

字体大小

字体大小由属性: font-size 设置
font-size 属性值为 xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, , 。default: medium

绝对大小

使用 xx-small, x-small, small, medium, large, x-large, xx-large，
根据CSS规范： 一个绝对大小与下一个绝对大小的差别应当是向上1.5, 向下 0.66。例如： medium = 10px 则， large=15px; 不过缩放比例不同浏览可能不同
具体以那个值为基准进行缩放，也有浏览器确定。绝对大小的属性值不常用

相对大小

larger, smaller, 这个两个属性值使元素的大小相对与其父元素的大小在绝对大小的梯度上上下移动。同 bolder, lighter 类似

百分数设置大小

百分数值是根据从父元素继承的大小来来计算，实现地字体大小更精确的控制

1
2
p { font-size: 10px; }
p i { font-size: 120%; }

i 元素中字体大小为 10px * 120% = 12px
如果计算值为小数，则对其进行取整 [14.4px ≈ 14px], [18.8px ≈ 19px]

使用长度单位

字体小可以使用绝对的长度单位来设置字体大小 

1
2
3
4
5
p.one {font-size: 36pt;}
p.two {font-size: 12pc;}
p.three {font-size: .5in;}
p.four {font-size: 1.2cm;}
p.five { font-size: 12mm;}

字体风格

字体风格使用属性 font-style 来设置： 用户 normal(竖直)， italic(斜体), oblique(倾斜)。default: normal
italic 是一种单独的字体风格， 属于字体层面的
oblique 是正常竖直文本的一个倾斜版本

文本属性

文本缩进

文本缩进就是段落的首行缩进， 使用属性 text-indent 来实现。
text-indent 属性值为 , , inherit
text-indent 值可为正为负， 正值向后缩进，负值向前伸展

1
2
3
4
5
6
7
8
9
10
11
12
<style>
    p {
        width: 300px;
        text-indent: 20px;
    }
</style>
<p>
    when i was young i'd listen to the radio
    waiting for my favorite songs
    when they played i'd sing along,
    it make me smile.
</p>

text-indent

END