<HeadFirst_HTML与CSS> O’REILLY_Chap.8_增加字体和颜色样式

本博客的FollowMeReading系列初衷是在线的读书笔记. 为方便后期查阅, 故写成博客形式, 使用关键字查询便可以快读的找到相关的内容.

FollowMeReading系列所选的书籍一般选自O’REILLY或Apress出版社, 尽量保证笔记内容的权威性.

FollowMeReading系列的博客标题格式为: <书名> 出版社章节数章节名, 方便大家在纸质版书籍中查找.

FollowMeReading系列博文中的内容大部分是原文, 非原文部分前面将有’博主’字样提醒.

感谢<HeadFirst_HTML与CSS>作者 Eric Freeman & Elisabeth Robson
感谢<HeadFirst_HTML与CSS>翻译 徐阳 丁小峰

本博客由@scott编写. 若转载此文章, 请注明出处和作者

正文

原文

BULLTE POINTS(要点):

• CSS提供了很多属性对字体的外观加以控制, 包括 font-family , font-weight , font-size , font-style .

• font-family 是一组有共同特征的字体.

• 用于Web的字体系列包括 serif, sans-serif, monospace, cursive 和 fantasy. serif 和 sans-serif 字体最为常用.

• 访问者在你的Web页面上看的字体取决于他们自己的计算机上安装了哪些字体, 除非你使用Web字体.

• 在 font-family CSS属性中指定候选字体是一个好主意, 以防用户没有安装你的首选字体.

• 最后一个字体要指定为一个通用字体, 如 serif 或 sans-serif , 这样一来, 如果找不到其他字体, 浏览器可以替换适当的字体.

• 如果你要使用某种字体, 而默认情况下用户可能没有安装这种字体, 可以在CSS中使用 @font-face 规则.

• 字体大小通常使用像素, em, 百分数或关键字指定.

• 如果使用像素(“px”)来指定字体大小, 就是在告诉浏览器字母高度是多少像素.

• em 和 % 是相对字体大小, 所以使用 em 和 % 指定字体大小是, 就意味着字体大小要相对于其父元素的字体大小指定.

• 使用相对字体大小可以让你的页面更可维护.

• 在 body 规则中使用字体大小关键字来设置基本字体大小, 这样如果用户希望文本更大或更小, 所有浏览器就能按比例缩放字体大小.

• 可以使用 font-weight CSS属性设置文本为粗体.

• font-style 属性用于创建斜体或倾斜文本, 斜体或倾斜文本是倾斜的.

• Web颜色是混合不同数量的红, 绿, 蓝色得到的.

• 如果混合红色100%, 绿色100%和蓝色100%, 可以得到白色.

• 如果混合红色0%, 绿色0%和蓝色0%, 可以得到黑色.

• CSS有16个基本颜色, 包括黑色, 白色, 红色, 蓝色, 和绿色, 以及150种扩展颜色.

• 可以使用红, 绿, 蓝百分数指定你想要的颜色, 也可以使用红, 绿, 蓝数值(0~255)指定, 或者使用颜色的十六进制码来指定颜色.

• 要找到你想要的一个颜色的十六进制码, 有一种很容易的方法, 可以使用一个照片编辑应用的颜色选取工具, 或者某个在线Web工具, 这样的工具有很多.

• 表示颜色的十六进制码有6位, 每一位取值为0~F. 前两位表示红色数量, 接下来两位表示绿色数量, 最后两位表示蓝色数量.

• 可以使用 text-decoration 属性为文本创建一个下划线. 有下划线的文档通常会被用户误以为是链接文本, 所以要谨慎使用这个属性.