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. Controller Plane

    Toward Highly Available and Scalable Software Defined Networks for Service Providers IEEE Communicat ...

  2. Ubuntu16.04配置TOMCAT8

    基于虚拟机Ubuntu16.04配置Tomcat过程 一.安装JDK 首先要确定好要安装的jdk和tomcat版本能对的上,具体如图所示: 版本选择是Jdk1.8,首先上官网http://www.or ...

  3. CentOS下 NFS的简单使用以及windows 关在linux的NFS存储方法

    1. 全部安装的情况下NFS已经安装到服务器上面了,如果没有安装的话 需要使用如下命令进行安装 yum -y install nfs-utils rpcbind 2. 创建需要使用的NFS目录 mkd ...

  4. Android 图表

    今天在群里有人提问Android的图表,在网上搜索了一下,在贴吧中看到的回答,说是Trinea整理的开源项目,不知道是不是博客上的Trinea. 将内容记录如下,以备需要时查看. GraphView ...

  5. 使用navicat 链接数据库时乱码

    在建立数据库链接时设置  高级->编码->uft-8 其他版本使用下面方法

  6. 如何自定义微信小程序swiper轮播图面板指示点的样式

    https://www.cnblogs.com/myboogle/p/6278163.html 微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很 ...

  7. vue 使用element-ui upload文件上传之后怎么清空

    首先上传组件中一定要绑定这两个属性: ref,和 :file-list,如果没有ref,即使 用 this.$refs.upload.clearFiles()也不行,因为这时候this.$refs为空 ...

  8. delphi clientdataset判断某一行值是否存在

    ClientDataSet的数据查找.我所介绍的心得和技巧都是用ClientDataSet来做范例,也可以应用于其他的一些DataSet.废话就不多说了.我们还是先看代码,让后再总结.1.Scanni ...

  9. asp.net使用动态模版导出word

    具体思路: 1.先制作Word模版,使用文本框+书签的方式来设计模版: 2.模版制作完之后,根据模版生成新文件,使用File.Copy方法,生成.doc格式新文件: 3.后台取得数据,参照网页渲染的方 ...

  10. 【设计模式】—— 命令模式Commond

    前言:[模式总览]——————————by xingoo 模式意图 将一个请求封装成一个对象,从而对这个命令执行撤销.重做等操作. 典型的Eclipse开发中,编辑器的操作就需要用到这个模式,比如Un ...