1.关于字体,font-family其实用的很别扭,但是又找不到原因
font-family 属性应该设置几个字体名称作为一种"后备"机制,如果浏览器不支持第一种字体,他将尝试下一种字体。
注意: 如果字体系列的名称超过一个字,它必须用引号,如Font Family:"宋体"。
于是乎学到了Web安全字体组合
常用的字体组合,通用的字体系列。
在CSS中,有两种类型的字体系列名称:
通用字体系列 - 拥有相似外观的字体系统组合(如 "Serif" 或 "Monospace")
特定字体系列 - 一个特定的字体系列(如 "Times" 或 "Courier")
计算机上的字体
图片.png
图片.png
图片.png
图片.png
2.字体样式font-style
normal 默认值。浏览器显示一个标准的字体样式。
italic 浏览器会显示一个斜体的字体样式。(想一想意大利比萨斜塔)
oblique 浏览器会显示一个倾斜的字体样式。
italic和oblique他们之间的根本区别是italic是对文字的字体设置字体样式,如果该字体没有斜体的样式,这个属性是无效的。
oblique是针对文字本身去设置一个倾斜的字体样式,就算文字字体本身没有倾斜的字体样式,这个属性依旧是可以呈现出倾斜的效果。
3.字体大小font-size
字体大小可是设置px,百分比还有em(ie对em的兼容不是很好)
浏览器中默认多px与em的换算公式为px/16=em
在实际使用中还可以使用百分比与em结合的方式
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
4.font-variant一个我从来没有用过的属性,一个神奇的属性
font-variant:small-caps 浏览器会显示小型大写字母的字体。
使用展示
5.@font-face,css3中新增的属性,可以用来自定义字体。
在项目中经常使用,但是大部分时候是使用iconfont,也可以用来自定义字体,使用如下
<style>
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family:myFirstFont;
}
</style>