[分享]css中如何引用下载字体

CSS可以使用自定义字体来美化文本样式。如果您需要使用未在用户计算机上安装的特殊字体，就需要从互联网上下载字体并在CSS中引用。下面是CSS中如何引用下载字体的方法：fontface { fontfa...

CSS可以使用自定义字体来美化文本样式。如果您需要使用未在用户计算机上安装的特殊字体，就需要从互联网上下载字体并在CSS中引用。下面是CSS中如何引用下载字体的方法：

@font-face {
    font-family: 'MyWebFont'; /*自定义字体名称*/
    src: url('webfont.eot'); /*EOT格式字体*/
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /*IE6-IE8兼容性*/
         url('webfont.woff2') format('woff2'), /*现代浏览器的优先选择*/
         url('webfont.woff') format('woff'), /*万能的现代浏览器字体*/
         url('webfont.ttf') format('truetype'), /*Truetype格式字体*/
         url('webfont.svg#svgFontName') format('svg'); /*针对老版iOS，SVG格式字体*/
    font-weight: normal;
    font-style: normal;
}
 
body {
    font-family: 'MyWebFont', Fallback, sans-serif; /*使用自定义字体*/
} 

上面这段CSS代码中，@font-face可以理解为定义一个自定义字体，其中font-family指定字体的名称，src指定字体文件所在的url地址。

使用方法很简单，在要应用这个自定义字体的样式中，将font-family指定为自定义字体名称即可，如果用户的计算机没有安装此自定义字体，则会自动使用其后面的替代字体。这里Fallback代表第三个替代字体，sans-serif代表默认字体。