前端之字体1
字体是在前端设计中最常见的元素,而且字体具有继承性,大到一个标题,小到一段文字都少不了它的身影。字体拥有各种复杂的变形,其中最常见的是,斜体、加粗。每一种字都有不少的字形,在设计的时候可以在ps软件中选择不同的字形,但是在开发中就没有那么灵活了,最常见的就是微软雅黑,在开发的时候需要考虑到每一台电脑里面都会拥有不同的字体,我们最大的额希望是能找打所有电脑中的共同字体,这样才会保证最终的效果是我们需要的。
字体家族的选择属性是:font-family,这个属性可以指定特定的字体,如果有多个可以用逗号隔开。当一个字体中拥有一个或者多个空格,或者拥有特殊的符号如#、$则需要用引号将其括起来;
在得到设计图中我们可能会遇到各种各样的效果,比如字体加粗,我们可用用font-weight解决,它拥有常见的bold、bolder、100~900等值,数字的意思是字体拥有9个级别的加粗;每一个子都可以自由的设置大小用属性font-size:它有xx-small、x-small、small等,常见的是为它设置一个固定值可以用单位em、px,可以根据父元素来做相对大小采取%来设置;每个字都有自己的风格与样式用font-style属性来设置:常见的属性是italic(斜体)、oblique(倾斜)。italic和oblique是有本质上的区别,italic是单独的风格,对每个字母有微小的改动,而oblique是正常竖直的文本的一个倾斜版。除了大小与风格,字体还有变形,属性font-variant:small-caps,可以对所有小型字母变大写操作,同时将已经大写的字母放大。
总结就是字体拥有常见属性为:size、weight、style、family、variant,为最常见的。但是在写代码的时候可以只需要一个font属性加上各自属性的值。
到目前为止我们感觉font只有五个属性,其实不止的还有行高line-height;尽管line-height是一个文本属性而不是字体属性,但是可以作为一个font值得补充。其中,需要注意font-size必须要在line-height之前,font-size和font-family是必须要的。