使用@font-face来实现特殊字体的定义,定义时需要设置src和font-family属性
范例如下(其中,华文行楷只是一个范例,你可以换成任意一个字体):
<style>@font-face {
font-family: 'myfont'
src: local('华文行楷'), url('STXINGKA.ttf') format('truetype')
}
.con {
font-family: 'myfont'
font-size: 44px
}
</style>
<div class="con">《HTML5布局之路》</div>
<div>h5course</div>
显示效果:
只有类名为con的div设置了特殊字体
PS:url当中的是你字体文件的路径,假如是放在font文件夹下的某个字体,而你的html文件与font文件夹同级,那么路径就应该是“font/STXINGKA.ttf”。
如果你想你网站上的文字看起来更加不一样,就必须要给网页中的标题、段落和其他页面元素应用不同的字体。你可以用font-family属性在CSS样式里设置字体,如: font-family:Arial但是设置的这种字体,你电脑上必须装有该字体,否则将按原字体样式显示。当然,也可以写上多种字体,当对方浏览你的网站,没有安装第一种字体时,浏览器就会在列表中继续往上搜寻,直到找到有适合的字 体为止,像这样: font-family:Arial,Helvetica,sans-serif在上例中,Web浏览器会先看看是否安装了Arial字体。如果安装了,那么就用Arial字体显示;如果没有安装,浏览器就会继续寻找Helvetica字体;如果还是没有找到,最后它就会指定一种通用的字体--sans-serif。如果字体的名称中包含多个单词时,则必须用双引号(“”)将它们括起来,如: font-family:"Times New Roman",Times,serif以下就介绍几种常用的font-family字体类型组合,每一列的最后都包含一种通用的字体。 1、Serif字体:最适用于冗长的文字信息,因为读者都会觉得这种字体使字母主笔划的结尾处会有一些细小的“足”,能够比较有效地引导人们的视线从一个字母一到到下一个字母,阅读起来感觉更加轻松。serif字体包括:Times,Times New Roman、Georgia。 2、Sans-serif字体:它看起来干净而简洁,所有经常被用在标题上。Sans-serif字体包括:Arial、Helvetica、Verdana和Formata。 3、Monospaced字体:它经常用于显示计算机代码,它每个字母都是等宽的。CSS调用系统没有的字体的操作方法和步骤如下:
1、首先,将字体以ttf,otf等格式放置在文件夹中。 这些是字体的不同格式,以便与不同的浏览器兼容,然后创建html文件test,见下图。
2、其次,完成上述步骤后,在test页面上打开的页面中添加一个class为anim的div代码,见下图。
3、接着,完成上述步骤后,在打开的页面上,找到anim的宽度和高度样式,见下图。
4、然后,完成上述步骤后,创建一个font-face,将字体设置为test,并将所有字体文件包含在src中,见下图。
5、随后,在anim样式中,完成上述步骤后,通过 font-family:test 来使用这个字体,见下图。
6、最后,完成上述步骤后,在浏览器中打开test文件,发现文本已成为字体了,见下图。