CSS 字体 - 竹间
程序员文章站
2022-06-01 21:26:33
...
1.font-family
不限长度的字体列表,字体包含空格须用引号包含如:"Times Now Roman"
通用字体族(所有操作系统都可用,作为备用字体放在列表末尾)
通用字体 | 包含的相关字体 |
serif | Times, Times New Roman |
sans-serif (sans指无额外装饰,比serif更易阅读) |
Arial, Helvetica |
monospace | Courier, Courier New |
2.font-size
不指定时,浏览器默认为16px(=1em)
在所有浏览器显示相同文本大小并允许缩放的解决方案——百分比+em:
1 body{font-size: 100%;} 2 h1{font-size: 2.5em;} 3 h2{font-size: 1.875em;} 4 p{font-size: 0.875em;}
3.font-style: normal/italic/oblique
当所用字体无斜体样式时,Safair使用默认字体,IE忽略该样式使用原字体。
4.font-weight:normal / bold
5.font-variant: normal / small-caps(小型大写字母)
简写: font:font-size, font-family [其他可选] / line-height
CSS3.0服务器端字体——@font-face——IE9及以上支持
1 @font-face{ 2 font-family:WebFont; 3 src: url('Fontin_Sans_R_45b.otf') format("opentype");/*字体文件路径和字体文件格式*/ 4 font-weight: normal; 5 } 6 h1{ 7 font-family: WebFont; 8 }
1 @font-face{ 2 font-family: Helvetica; 3 src: local("Helvetica Neue") , url('服务器端字体'); /*先搜索本地字体,再搜索服务器上的字体*/ 4 }