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. 《Linux内核分析》课程第五周学习总结

    姓名:何伟钦 学号:20135223 ( *原创作品转载请注明出处*) ( 学习课程:<Linux内核分析>MOOC课程http://mooc.study.163.com/course/U ...

  2. 冲刺Two之站立会议1

    今天我们开始了第二个冲刺期的工作,大家重新讨论了下个阶段的工作内容,由于上次演示我们主要只是实现了摄像头开启.通信和语音通话的功能,而且各部分还有待完善.所以我们决定了之后的主要工作的内容:之前服务器 ...

  3. python 安装多个包/pip用法

    列出已安装的包 pip freeze or pip list 导出requirements.txt pip freeze > <目录>/requirements.txt 安装包 在线 ...

  4. 四则运算level2

    package j; import java.util.Scanner; public class Main { public static void main(String[] args) { Sc ...

  5. php排序学习之-冒泡排序

    原理:对一组数据,比较相邻数据的大小,将值小数据在前面,值大的数据放在后面.   (以下都是升序排列,即从小到大排列) 举例说明: $arr = array(6, 3, 8, 2, 9, 1); $a ...

  6. Java微信二次开发(二)

    第二天,做微信文本消息接口请求与发送 需要导入库:dom4j-1.6.1.jar,xstream-1.3.1.jar 第一步:新建包com.wtz.message.response,新建类BaseMe ...

  7. MySQL5.7 的编译安装

    转: 5.7的安装: https://www.insp.top/article/make-install-mysql-5-7 5.6的安装: https://www.chenyudong.com/ar ...

  8. SpringBoot入坑指南之六:使用过滤器或拦截器

    在Web应用中,常常存在拦截全部或部分请求进行统一处理的应用场景,如权限校验.参数校验.性能监控等. 在SpringMVC框架中,我们可以通过过滤器或拦截器实现相关功能,spring-boot-sta ...

  9. BZOJ 4380 [POI2015]Myjnie | DP

    链接 BZOJ 4380 题面 有n家洗车店从左往右排成一排,每家店都有一个正整数价格p[i]. 有m个人要来消费,第i个人会驶过第a[i]个开始一直到第b[i]个洗车店,且会选择这些店中最便宜的一个 ...

  10. HGOI 20181027 幻象(概率DP)

    40 pts: 考场上打了40分暴力,理论的话就是概率树,把每一个状态去去到各个带权(概率)的和就是答案 最终处理的话就是dfs出01序列0代表没有幻象,1代表出现幻象然后在每一次dfs出一段序列的时 ...