CSS font系列
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系列的更多相关文章
- CSS | 字体系列
CSS字体处理中最复杂的部分是字体系列(font-family)匹配和字体加粗(font-weight)匹配,其次是字体大小(font-size)的计算. 一. 字体系列 相同的字体可能有很多不同的称 ...
- CSS 魔法系列:纯 CSS 绘制各种图形《系列六》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- CSS 魔法系列:纯 CSS 绘制各种图形《系列五》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- CSS 魔法系列:纯 CSS 绘制图形(各种形状的钻石)
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- CSS 魔法系列:纯 CSS 绘制图形(心形、六边形等)
<CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...
- CSS 魔法系列:纯 CSS 绘制基本图形(圆、椭圆等)
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- IE CSS Bug 系列
1.[IE CSS Bug系列]IE6&IE7图片链接无效 <!doctype html> <html> <head> <meta charset=& ...
- 【转载】CSS font关键字属性值的简单研究
文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/wordpress/ 原文链接:http://www.zhangxinxu.com/wordpress/?p=5 ...
- CSS学习系列4 -- 再说CSS中的浮动运用及clear:left/right实际用法
在 CSS学习系列2 -- CSS中的清除浮动 中,我们详细说了CSS中清除浮动的方法及使用 后来我自己在项目开发一个需要使用浮动的网页时,进行了实际运用,加上后来看到一篇好文章.所以就在这里再次写篇 ...
随机推荐
- PAT甲级题解-1047. Student List for Course (25)-排序
一开始是建立了course[2501][40001]数组,存储每节课的学生编号然后for循环两层输出,但这样复杂度为O(2500*40000),也很明显导致最后时间超时后来发现最多40000学生,每个 ...
- 【Alpha】第五次Scrum meeting
今日重大事件一览: 姓名 今日完成任务 所耗时间 刘乾 今日没有完成那个Issue..TuT第一次这么努力工作的我没有完成任务...真的是任务太坑啦. 任务完成了 60% Issue链接:https: ...
- YQCB冲刺第二周第四天
站立会议 任务看板 今天的任务为实现精准查账的功能. 昨天的任务为实现查看消费明细的功能. 遇到的问题为忘记在记账记录的表中添加用户名一栏,这样导致不同用户登录时查看消费明细会显示所有用户的所有记录.
- Controller Plane
Toward Highly Available and Scalable Software Defined Networks for Service Providers IEEE Communicat ...
- PHP后台支付的开发:微信支付和支付宝支付
关于支付的流程之类的就不做解释,大家可以自行搜索! 微信支付 项目前提:本人用的是tp框架,PHP语言下载到微信平台提供的微信支付接口文件,放在了tp第三方类库vendor,命名为WxpayAPI, ...
- tp3.2.3运用phpexcel将excel文件导入mysql数据库
1,下载PHPExcel 2,配置将下载好的PHPExcel文件与PHPExcel.php 放到thinkphp 根目录 include/Library/Org/Util/下面 3,同时将PHPExc ...
- 二分图最大权匹配模板(pascal)
用uoj80的题面了: 从前一个和谐的班级,有 nlnl 个是男生,有 nrnr 个是女生.编号分别为 1,…,nl1,…,nl 和 1,…,nr1,…,nr. 有若干个这样的条件:第 vv 个男生和 ...
- 【设计模式】—— 职责链模式ChainOfResponsibility
前言:[模式总览]——————————by xingoo 模式意图 避免请求的发送者,和接受者过度的耦合在一起.一个请求者只需要发送一个请求即可,它的请求具体由后面哪个对象进行响应,并不需要关心.而请 ...
- php 微信公众号上传永久素材
<?php namespace Mob\Controller; use Think\Controller; class WxmaterialController extends Controll ...
- bzoj 2243: [SDOI2011]染色 (树链剖分+线段树 区间合并)
2243: [SDOI2011]染色 Time Limit: 20 Sec Memory Limit: 512 MBSubmit: 9854 Solved: 3725[Submit][Status ...