css字体样式

  为了更好的使用CSS的样式,有必要对样式的命名规律、分类进行总结,这样才能更好的查询、使用样式。前面在讲解到一些样式比如字体、背景、边框都是根据当前课程是否用得到, 没有系统总结,随着课程的推进有必要进行系统的总结。

字体属性 含义 默认值
font-size 字体大小 1.数字方式16px、100%。2.表示大小的单词xx-small、large等 16px/medium
font-weight 字体粗细 1.数字方式100、200等。2.表示大小的单词normal等 400/normal
font-family 字体 比如"宋体"、Times New Roman
font-style 字体是否倾斜 italic表示斜体,normal表示正常 normal(正常)

字体大小font-size

  字体大小定义方式有绝对定义和相对定义两种方式,使用像素作为单位就是绝对像素,显示器一个像素的边长符合显示器行业标准,具体大小也不必关心,使用 百分比就是相对定义的方式,一个元素定义font-size:200%就是一它的父元素为基准,字体放大两倍,如果父元素没有定义字体尺寸,那么就以浏览器默认的参考尺寸为准, 注意不是浏览器默认的字体显示尺寸,不同的浏览器有差异,多数都是以12px为基准。有些常用的字体大小,使用文字的形式表达,比如medium表示16px,xx-large表示 32px。

xx-small x-small small medium large x-large xx-large
9px 10px 13px 16px 19px 24px 32px
56.25% 62.5% 81.25% 81.25% 100% 150% 200%

  字体大小定义方式有绝对定义和相对定义两种方式,使用像素作为单位就是绝对像素,显示器一个像素的边长符合显示器行业标准,具体大小也不必关心,使用 百分比就是相对定义的方式,一个元素定义font-size:200%就是一它的父元素为基准,字体放大两倍,如果父元素没有定义字体尺寸,那么就以浏览器默认的参考尺寸为准, 注意不是浏览器默认的字体显示尺寸,不同的浏览器有差异,多数都是以12px为基准。有些常用的字体大小,使用文字的形式表达,比如medium表示16px,xx-large表示 32px。

  实际工作中如何定义字体尺寸才是大家关心的问题,使用像素px的方式定义字体的特点是灵活,可以满足各种尺寸需求,满足个性需求。就像光的颜色可以使用十六进制的 形式描述,也可以使用生活化的语言红色red,绿色green去描述,光学、图形学等技术领域的可能更倾向于选择十六进制,平面设计、服装设计等艺术类的工作可能更倾向于 每一种颜色起一个名字去描述。对于物理学一个原子就是一个原子,但从化学的角度看,每一类原子都要有一个名字,用化学元素周期表描述。CSS和HTML的标准是技术和艺术的桥梁, 如果你偏向页面的视觉效果设计,那么你肯定会有几种常用的字体尺寸,既然常用那就没必要使用数字的方式描述,可以用一系列英文单词描述一组大小递变的字体,比如使用单词medium代替 16px,这也是浏览器p元素默认的值,使用xx-large代替32px,大于32px的不太常用,就没必要使用一个专门的词描述,需要多大,自定义即可。

元素默认字体

  浏览器会根据不同元素的用途默认不同尺寸的字体,比如p元素默认字体大小16px,标题h2默认字体19px,不同浏览器有微小差异,不过多数情况下是一致的。

  不同的h1~h6标题元素字体默认粗体,为了便于比较大小,设为正常粗细

h6 h5 h4 h3 h2 h1

字体粗细font-weight

   浏览器的默认粗细是normal,需要加粗的时候直接使用关键字bold即可。

相对定义

  参考基准是父元素的粗细,有两个值更粗bolder和更细lighter,比如font-weight:bolder表示比父元素的字体更粗,加粗的量是多少,取决于浏览器的默认值。 在不强调字体粗细对比的时候,一般不用。

含义
bolder 更粗
lighter 更细

绝对定义

  使用关键字normal表示正常粗细,使用关键字bold表示粗体,除了使用关键字normal和bold的方法,也可使用100、200、300...900总共9个粗细等级。 400相当于normal,700相当于bold。

400 700
normal bold

<b>与<strong>

  使用标签<b>与<strong>包裹文本,从视觉的效果来看也有加粗的效果,不过<strong>的作用是强调文章中的关键词,浏览器默认加粗是为了视觉与语义一致, <b>和CSS样式加粗一样,并没有语义化的意思,定义的是视觉效果,如果不是出于网站推广优化,使用CSS的方式就可以。

字体font-family

    <style>
        p{
            font-family: 宋体;
        }
        h2{
            font-family: Times New Roman;
        }
        a{
            /*定义多个字体,使用逗号隔开,前一个不支持就测试后一个*/
            font-family: Times New Roman,宋体;
        }
    </style>

  字体font-family定义依赖于操作系统的字库支持,上面为字体font-family引入多个属性值的方法可以防止某种字体客户端操作系统不支持,也可以保证中英文使用自己的字体, 比如Times New Roman不支持中文,当浏览器解析中文的时候就会开始测试Times New Roman后面的字体。

自定义字体

    <style>
        /*@font-face远程加载字体*/
        @font-face {
            /*自定义字体名字*/
            font-family: 天朝甲骨文;
            /*文件下载地址*/
            src:url('http://www.yanhuangxueyuan.com/天朝甲骨文.ttf');
            /*调用字体加粗*/
            font-weight: bold;
        }
        @font-face {
            font-family: 大秦小篆;
            src:url('http://www.yanhuangxueyuan.com/大秦小篆.ttf');
            /*调用字体显示大小24px*/
            font-size: 24px;
        }
    </style>

  现在客户端一般支持多数字体,如果你们公司美工或者设计师想搞个 稀有的字体,而客户端可能不支持,就需要借助@font-face定义,提前把字体库.ttf存到服务器上, 当用户用浏览器打开网站访问的时候,会自动加载到本地,类似图片的自动加载。

  .ttf是字体库的格式,使用photoshop、coreldraw都可以导出.ttf格式字体