博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
图解 CSS (5): font - 字体
阅读量:6257 次
发布时间:2019-06-22

本文共 1241 字,大约阅读时间需要 4 分钟。

  hot3.png

fontfont-familyfont-sizefont-weightfont-stylefont-variant另外 font-size-adjust 和 font-stretch 从 CSS 2.1 已废弃, 就不再学习了.
font-family(指定字体):
26154058_7qod.png

如果字体名包含空格或其他特殊符号, 应使用引号(双引号或单引号):
26154058_FFxj.png

可以同时指定多个字体(逗号分割), 前者优先、缺失后补、再缺使用默认.
26154058_Fp7x.png

font-size(字号), 首先有几个常数值: xx-small、x-small、small、medium、large、x-large、xx-large:
26154058_q10n.png
26154058_U1l7.png
26154058_sM3j.png
26154058_xwU4.png
26154058_awZP.png
26154058_X9R5.png
26154058_LEf5.png

inherit(继承)、smaller(缩小)、larger(放大):
26154058_Zd6J.png
26154058_BAiu.png
26154058_ZjqL.png

自定义大小(使用 px 等单位)和百分比:
26154058_rwEB.png

font-weight(粗体设置): 100-900、normal(默认)、bold(粗体)、bolder(再粗点)、lighter(再细点).
那么多参数, 想得挺美, 但字体大都不支持那么细致, 其实一个 bold 也就够了.
26154058_4UeY.png
26154058_IMOk.png

font-style(斜体设置): normal(默认)、italic(斜体)、oblique(斜体).
italic 和 oblique 本来是有区别的, 但字体大都不支持, 即使字体能支持浏览器也不一定支持, 都当斜体就是了.
26154059_3EFs.png
26154059_KPD0.png

font-variant: normal(默认)、small-caps(把小写字母显示为小型大写字母):
26154059_WSaV.png

可以用 font 综合设置上面这些属性, 一般顺序是:
font-style、font-variant、font-weight、font-size/line-height、font-family.
可省略, 顺序也有灵活行, 不过好像 font-size 与 font-family 只能是这个顺序;
各元素用空格隔开, 字体(若多个)用逗号隔开; 比较方便地是: 用这种方法在设置字号时还可同时指定行高(用/分割).
26154059_ft9N.png

既然这样, 我们可以用:font: italic;     代替 font-style: italic;font: small-caps; 代替 font-variant: small-caps;font: bold;       代替 font-weight: bold;font: 16px;       代替 font-size: 16px;font: 16px/32px;  代替 font-size: 16px/32px;但遗憾的是: 不能用 font: Arial; 代替 font-family: Arial; (用 IE 测试)
font 还可以直接套用浏览器上已知对象的字体属性, 譬如:
caption、small-caption、menu、icon、status-bar、message-box.
26154059_UQ9c.png

转载于:https://my.oschina.net/hermer/blog/321022

你可能感兴趣的文章
主机连接虚拟机 web服务
查看>>
smarty 模板编译和变量调节器 模板引入
查看>>
【java集合框架源码剖析系列】java源码剖析之TreeMap
查看>>
【学习笔记】Python编程
查看>>
超链接与图像
查看>>
19年PDYZ冬令营游记
查看>>
jumpserver 3.0 开源跳板机环境搭建
查看>>
liunx 修改IP地址
查看>>
Zabbix_Agent windows下自动安装脚本
查看>>
rsyslog+loganalyzer+evtsys搭建集中式监控系统
查看>>
Linux FTP匿名用户上传下载登录
查看>>
JavaScript执行效率小结
查看>>
llinux学习基础4之变量及条件测试
查看>>
在KVM虚拟机安装liuux和win7
查看>>
我的友情链接
查看>>
从文件夹读取图片并按时间排序,然后分页显示
查看>>
java生成Https证书,及证书导入的步骤和过程
查看>>
Exchange2003升级到2010步骤(1)
查看>>
bzoj 2190: [SDOI2008]仪仗队
查看>>
不要使用TC/TC++/BC/CB等古老的编译器来学习C/C++
查看>>