当前位置:

@font-face(css3属性)实现在网页中嵌入任意字体

本文最后更新于2019-05-21,已超过 1年没有更新,如果文章内容、图片或者下载资源失效,请留言反馈,我会及时处理,谢谢!

温馨提示:本文共626个字,读完预计2分钟。

@font-face语法规则

@font-face(css3属性)实现在网页中嵌入任意字体-Mr.Li's Blog

说明:
YourWebFontName:
此值指的就是你自定义的字体名称,最好是使用你下载的默认字体,他将被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”

source:此值指的是你自定义的字体的存放路径,可以是相对路径也可以是绝路径;

format:此值指的是你自定义的字体的格式,主要用来帮助浏览器识别,其值主要有以下几种类型:truetype,opentype,truetype-aat,embedded-opentype,avg等;weight和style:这两个值大家一定很熟悉,weight定义字体是否为粗体,style主要定义字体样式,如斜体

实例:(以SingleMaltaRegular为例)

下载所需要的字体。

获得@font-face所需的.eot,.woff,.ttf,.svg字体格式字体。可以在这个网站上搞定。点击进入 (fontsquirrel)

Font Squirrel下载文件到本地的电脑上了,解压。即可得到字体。

在项目中新建文件夹fonts,讲下载字体放进去。

样式书写格式:

@font-face(css3属性)实现在网页中嵌入任意字体-Mr.Li's Blog

最后即可引用的字体:

@font-face(css3属性)实现在网页中嵌入任意字体-Mr.Li's Blog

附:

本文链接:,转发请注明来源!
评论已关闭。