前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >@font-face 属性

@font-face 属性

作者头像
Html5知典
发布2019-11-26 17:06:36
8570
发布2019-11-26 17:06:36
举报
文章被收录于专栏:Html5知典

用途

@font-face 允许网页开发者为其网页指定在线字体。 通过这种作者自备字体的方式,@font-face 可以消除对用户电脑字体的依赖。 @font-face 不仅可以放在在CSS的最顶层, 也可以放在 @规则 的 条件规则组 中。

语法

代码语言:javascript
复制
@font-face { 
    [ font-family: <family-name>; ] || 
    [ src: [ <url> [ format(<string>#) ]? | <font-face-name> ]#; ] || 
    [ unicode-range: <urange>#; ] || 
    [ font-variant: <font-variant>; ] || 
    [ font-feature-settings: normal | <feature-tag-value>#; ] || 
    [ font-stretch: <font-stretch>; ] || 
    [ font-weight: <weight>; ] || 
    [ font-style: <style>; ] 
} 
where 
<family-name> = <string> | <custom-ident>+ 
<feature-tag-value> = <string> [ <integer> | on | off ]?

描述

<font-family>

是自定义的字体名称,最好是使用下载的默认字体,将被引用到Web元素中的font-family。

src

是自定义的字体的存放路径,可以是相对路径也可以是绝路径

font-variant

font-variant的值。

font-stretch

font-stretch的值。

font-weight

font-weight的值。

font-style

对于src所指字体的描述。如果所需字体符合描述,则采用本 font-face 所定义的字体。

unicode-range

Unicode范围。

例子

代码语言:javascript
复制
@font-face { 
    font-family: 'YourWebFontName'; 
    src: url('YourWebFontName.eot'); /* IE9 Compat Modes */ 
    src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
    url('YourWebFontName.woff') format('woff'), /* Modern Browsers */ 
    url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */ 
    url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */ 
}
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-12-07,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Html5知典 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档