Expanding your vocabulary

总述

在上一章节介绍了 CSS 的基础之后,这一章节更加具体地展开关于 CSS 的各种 rules 能够达成的效果。比如

  • 字体:font-family
  • 字号:font-size
  • 字重:font-weight
  • 斜体字:font-style:italic/oblique
  • 字体的颜色:color
  • 背景的颜色:background-dcolor
  • 下划线:textdecoration:underline

font-family

在 CSS 中,有5个font-family,而每个 font-family 中包含着很多类型的 font,它们的名字和例子如下:

  • Serif family:Times New Roman, Georgia
  • San-serif family:Arial,Geneva
  • Monospace family:Courier
  • Cursive family:Comic Sans
  • Fantasy family

他们各自的特点是:

  • Serif family:font with serifs
  • San-serif family:font without serifs
  • Monospace family:fonts that have constant-width characters
  • Cursive family:look handwritten
  • Fantasy family:contains stylized decorative fonts

对于不同的 font-family,有着对人不同感觉:

Take a good look at the font families:serif fonts have an elegant, traditional look, while sans-serif fonts have a very clean and readable look. Monospace fonts feel like they were typed on a typewriter. Cursive and fantasy fonts have a playful or stylized feel.

设置 font-family specification

当设置 font-family 的 value 的时候,可以这样写:

需要明白以下几点:

  1. 前面三个字体都是具体字体的名称,这里的大小写是有区别的
  2. 是否显示相应的字体与对应的浏览器有关,如果浏览器没有 find 到相应的字体,那么寻找下一款字体
  3. 如果前面的都没有找到,那么就应用浏览器 default 的 sans-serif 字体(sans-serif 并不是一种特定的字体,而是浏览器默认的字体)
  4. 如果字体的名字是分开的形式,比如 Courier New,应该在 value 中写成"Courier New"
  5. 在选择字体的时候,最好选择 Windows 和 Mac 系统都支持的字体,它们有:
    •Andale Mono
    •Arial 
    •Comic sans
    •Courier New
    •Georgia
    •Impact
    •Time New Roman
    •Trebuchet MS
    •Verdana

Using Web Font

由于系统和浏览器的原因,无法使得每一个网页的 visitor 都可以看到 CSS 中设置的字体,这时候,就可以使用 Web Font 来达成这一目标

How Web fonts Work

  1. 你储存在 Web Server 对应的 ".woof"格式的文件
  2. Browser 检测到网页使用了 Web Font,请求 Web Server 用来 retrive 相应的 Web Font
  3. Web Server 返回相应的字体文件,browser 显示相应的字体的文本。

How to use Web Font to your page

  1. Find a font:visit sites to find free and licensed font you can use in your websites
  2. Make sure you have all the format of the font you need
  3. Place your font files on the Web:You can use font services online , then you'll use the URL of your font files.
  4. Add the @font-face rule to your CSS:You should assign a name for the font and then note down the src by using URL
  5. Using the family name in your CSS

这里需要明白和注意几点:
字体的格式:

  • Truetype:.ttf
  • Opentype:.otf Opentype is on top of Truetype
  • Embedded Opentype fonts:.eot supported only on IE
  • SVG font:.svg short for Scable Vector Graphics
  • Web open font format:.woff Base on Truetype and is developed as a standard Web Font.

关于@font-face :
@font-face 其实是一个 built-in CSS rule(还有其他,比如:@media)这个 rule 与普通的含 selector 的rule 不同,它的语法为:

调节 font-size 的三种方式:

有三种方式去调节字体的大小,分别是:

  • px:font-size:14px
  • %:font-size:120%
  • em:font-size:1.2em
    需要注意的是:
  • px方式:其中的14与 px 之间不要有空格
  • %方式和em方式都可以达到相同的效果
  • 在使用的时候可以根据 inheritance 来系统地调节字体的大小

Specify 颜色的三种方式

电脑屏幕的颜色显示模式为 RGB 模式,所以显示不同颜色的思路是通过 R,G,B 三种色彩的占比来显示,可以采用:

  • By name :CSS 预定义了150种颜色的名字,如 red,blue,yellow 等等, basic color 有16种,可以直接用这些名字:
  • By red,green and blue values:可以采用 background-color:rgb(80%,40%,0%)这样的占比的方式,也可以采用数值的方式background-color:rgb(204,102,0)
  • By hex code:比如#cc6600

其他知识

  1. 一个寻找 Web fonts 的网站:https://www.fontsquirrel.com
  2. 一个用于搜查颜色的网站:https://en.wikipedia.org/wiki/Web_colors

HTML第八章总结的更多相关文章

  1. 精通Web Analytics 2.0 (10) 第八章:竞争情报分析

    精通Web Analytics 2.0 : 用户中心科学与在线统计艺术 第八章:竞争情报分析 在现实世界中,收集竞争情报可能意味着雇人在竞争对手的垃圾桶(实际会发生!)翻找. 在虚拟世界中,堆如山的数 ...

  2. 《Linux内核设计与实现》读书笔记 第十八章 调试

    第十八章调试 18.1 准备开始          需要准备的东西: l  一个bug:大部分bug通常都不是行为可靠而且定义明确的 l  一个藏匿bug的内核版本:找出bug首先出现的版本 l  相 ...

  3. 《Entity Framework 6 Recipes》中文翻译系列 (42) ------ 第八章 POCO之使用POCO

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 第八章 POCO 对象不应该知道如何保存它们,加载它们或者过滤它们.这是软件开发中熟 ...

  4. 《Entity Framework 6 Recipes》中文翻译系列 (46) ------ 第八章 POCO之领域对象测试和仓储测试

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 8-8  测试领域对象 问题 你想为领域对象创建单元测试. 这主要用于,测试特定的数 ...

  5. Python之路【第十八章】:Django基础

    Django基本配置 Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Se ...

  6. 读《编写可维护的JavaScript》第八章总结

    第八章 避免“空比较” 我们在对传进来的参数做处理之前,肯定需要验证一下是否是我们想要的,也就是说大多数情况下,我们需要对比一下它的类型. 作者首先给了一个看起来都感觉不对的代码: var Contr ...

  7. 《Linux内核设计与实现》课本第十八章自学笔记——20135203齐岳

    <Linux内核设计与实现>课本第十八章自学笔记 By20135203齐岳 通过打印来调试 printk()是内核提供的格式化打印函数,除了和C库提供的printf()函数功能相同外还有一 ...

  8. Getting Started With Hazelcast 读书笔记(第八章-第十章)

    第八章到第十章就是一些介绍性的描述,吹的就是Hazelcast能使用在各种地方..   第八章 -从外面看 1.Hazelcast做了一个memcache的java实现,方便py和php使用. 2.可 ...

  9. [Effective Java]第八章 通用程序设计

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  10. Laxcus大数据管理系统2.0(10)- 第八章 安全

    第八章 安全 由于安全问题对大数据系统乃至当前社会的重要性,我们在Laxcus 2.0版本实现了全体系的安全管理策略.同时我们也考虑到系统的不同环节对安全管理的需求是不一样的,所以有选择地做了不同的安 ...

随机推荐

  1. 20145221高其_Final

    20145221高其_Final 免考题目 密码保密与信息安全大赛--网络攻防 免考内容 CTF简介 CTF(Capture The Flag)中文一般译作夺旗赛,在网络安全领域中指的是网络安全技术人 ...

  2. bzoj 2115 Xor - 线性基 - 贪心

    题目传送门 这是个通往vjudge的虫洞 这是个通往bzoj的虫洞 题目大意 问点$1$到点$n$的最大异或路径. 因为重复走一条边后,它的贡献会被消去.所以这条路径中有贡献的边可以看成是一条$1$到 ...

  3. 2015,3,10 2(南阳理工ACM)

    描述有一个整型偶数n(2<= n <=10000),你要做的是:先把1到n中的所有奇数从小到大输出,再把所有的偶数从小到大输出.   输入 第一行有一个整数i(2<=i<30) ...

  4. linux命令之crontab定时执行任务【转】

    本文转载自:https://www.cnblogs.com/coffy/p/5608095.html 一.crond简介 crond 是linux下用来周期性的执行某种任务或等待处理某些事件的一个守护 ...

  5. 一些常用的mysql语句实例-以后照写

    create database blog; create table blog_user ( user_Name char(15) not null check(user_Name !=''), us ...

  6. P3159 [CQOI2012]交换棋子

    思路 相当神奇的费用流拆点模型 最开始我想到把交换黑色棋子看成一个流流动的过程,流从一个节点流向另一个节点就是交换两个节点,然后把一个位置拆成两个点限制流量,然后就有了这样的建图方法 S向所有初始是黑 ...

  7. (转)Awesome Courses

    Awesome Courses  Introduction There is a lot of hidden treasure lying within university pages scatte ...

  8. HDU 3047 Zjnu Stadium(带权并查集)

    http://acm.hdu.edu.cn/showproblem.php?pid=3047 题意: 给出n个座位,有m次询问,每次a,b,d表示b要在a右边d个位置处,问有几个询问是错误的. 思路: ...

  9. HDU 4821 String(BKDRHash)

    http://acm.hdu.edu.cn/showproblem.php?pid=4821 题意:给出一个字符串,现在问你可以找出多少个长度为M*L的子串,该子串被分成L个段,并且每个段的字符串都是 ...

  10. React内三种函数的写法

     以下提供三种React内函数的写法,都可以正常运行,有疑问可以留言 写法一:让函数内部的this指向这个类的实例,它是用bind实现的,bind的第一个参数表示context,就是this. //写 ...