font-family

font-family: Verdana,Helvetica,Arial,"Microsoft YaHei",sans-serif;

font-family: Georgia,Times,“Times New Roman”,serif;

通常认为,电脑屏幕上sans-serif更可读。

如果字体名称超过一个词,应该用引号包裹。

更多字体,http://www.w3schools.com/cssref/css_websafe_fonts.asp

font-size

在指定font-size时,以px为单位,可控性强。

如果以em为单位,则要注意,因为em是以父元素的font-size为基准计算的。

如果以百分数指指定,也是以父元素的font-size为基准计算。

一般来说,浏览器的默认字体大小是16px;<h1>是默认的200%;<h2>是默认的150%;<h3>是默认的120%;<h4>是默认的100%。

如果在body中使用百分数设置字体大小,将以默认字体大小为基准。

font-weight

normal(默认),可选bold、lighter、bolder;

也可以用数字,100~900,400相当于normal,700相当于bold。

font-variant

默认值normal;

可选值small-caps,原本的小写变成大写,原本就是大写的变得更大。(不知道有啥用???)

font-style

默认值normal,可选italic、oblique。

italic,斜体,是一种字体风格。

oblique,倾斜,单纯地把文本倾斜。

font属性的简写规则:

Font:(font-style font-variant font-weight)font-size/line-height font-family;

注意:font简写属性必须要有font-size/line-height font-family的值,否则是无效的。

CSS font系列的更多相关文章

  1. CSS | 字体系列

    CSS字体处理中最复杂的部分是字体系列(font-family)匹配和字体加粗(font-weight)匹配,其次是字体大小(font-size)的计算. 一. 字体系列 相同的字体可能有很多不同的称 ...

  2. CSS 魔法系列:纯 CSS 绘制各种图形《系列六》

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  3. CSS 魔法系列:纯 CSS 绘制各种图形《系列五》

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  4. CSS 魔法系列:纯 CSS 绘制图形(各种形状的钻石)

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  5. CSS 魔法系列:纯 CSS 绘制图形(心形、六边形等)

    <CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...

  6. CSS 魔法系列:纯 CSS 绘制基本图形(圆、椭圆等)

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  7. IE CSS Bug 系列

    1.[IE CSS Bug系列]IE6&IE7图片链接无效 <!doctype html> <html> <head> <meta charset=& ...

  8. 【转载】CSS font关键字属性值的简单研究

    文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/wordpress/ 原文链接:http://www.zhangxinxu.com/wordpress/?p=5 ...

  9. CSS学习系列4 -- 再说CSS中的浮动运用及clear:left/right实际用法

    在 CSS学习系列2 -- CSS中的清除浮动 中,我们详细说了CSS中清除浮动的方法及使用 后来我自己在项目开发一个需要使用浮动的网页时,进行了实际运用,加上后来看到一篇好文章.所以就在这里再次写篇 ...

随机推荐

  1. PAT甲级题解-1097. Deduplication on a Linked List (25)-链表的删除操作

    给定一个链表,你需要删除那些绝对值相同的节点,对于每个绝对值K,仅保留第一个出现的节点.删除的节点会保留在另一条链表上.简单来说就是去重,去掉绝对值相同的那些.先输出删除后的链表,再输出删除了的链表. ...

  2. #个人博客作业Week1----关于软件和软件工程的出现

    1.软件工程这个词如何出现的? 数学与电脑科学先锋Margaret Hamilton在开发阿波罗11号软件的期间发明的,目的是将软件与硬件还有其他工程学类做出区别,为软件以及那些发明者争取应有的正统性 ...

  3. Github作为图床的一个小坑

    Github作为图床的一个小坑 前言 听了少铭同学建议把github作为图床,结果遇到了一个小坑,总是显示不出来图片. 问题描述与解决 形如下的链接是显示不出来的: https://github.co ...

  4. sqlserver附加数据库时,无法打开物理文件 "xx.mdf"。操作系统错误 5:"5

    sqlserver在附加数据库时,提示无法打开物理文件 "xx.mdf".操作系统错误 5:"5 此时可能你是用window验证方式登陆数据库的? 如果是这样,断开连接, ...

  5. style和getComputedStyle(ff)和currentStyle

    obj.style:这个方法只能JS只能获取写在html标签中的写在style属性中的值(style=”…”),而无法获取定义在<style type="text/css"& ...

  6. beta 圆桌 6

    031602111 傅海涛 1.今天进展 接口微调修正 2.存在问题 文档转化太久 3.明天安排 完成全部接口的交互 4.心得体会 文档转化需要好好优化 031602115 黄家雄 1.界面优化 2. ...

  7. webgl 混合

    先上例子 <!doctype html> <html> <head> <meta charset="utf-8" /> <ti ...

  8. ethereum & ETC

    ethereum & ETC https://github.com/ethereum/go-ethereum https://discountry.github.io/tutorial/201 ...

  9. 解决Delphi 2010启动时出现cannot create xxxx\EditorLineEnds.ttr问题

    由于在Windows安装了最近的更新(KB2982791, KB2970228)后,Delphi的IDE需要创建的一个文件%TEMP%\EditorLineEnds.ttr会被系统锁定,导致除非重新启 ...

  10. P3114 [USACO15JAN]踩踏Stampede

    题目链接 我一开始看错题了,看成每秒走\(c_i\)个单位了,于是样例答案就变成了3..害我调好久,还以为样例错了 对于每头奶牛,我们求出它经过\(y\)轴的时间段,然后离散化一下,将奶牛按照从低到高 ...