css中如何引用下载字体

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

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

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代表默认字体。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中如何引用下载字体

粉丝

0

关注

0

收藏

0

已有0次打赏