专栏首页Html5知典@font-face 属性

@font-face 属性

用途

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

语法

@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范围。

例子

@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 */ 
}

本文分享自微信公众号 - Html5知典(gh_5b9c8e323efa),作者:hudao

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-12-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • <audio>标签

    <audio> 标签用于音频内容,可以包含多个音频资源。浏览器会自动选择最合适的一个来用。

    Html5知典
  • <video>标签

    Html5知典
  • 【设备】电池状态

    电池状态(Battery Status)API是通过navigator的battery属性来实现的,battery对象提供了有关系统电池级别的信息,还定义了一些...

    Html5知典
  • CSS3 font 学习笔记

    LRainner
  • [C#] 常用工具类——直接在浏览器输出数据

    跟着阿笨一起玩NET
  • HTML5基础——文字常用标签(上)

    一、微文概览 标题 字体与字号 颜色 二、详细介绍 1. 标题 我们在HTML文件中写一篇文字时,总会希望将标题的文字设置的大一些,黑一些,粗一些,那么怎样在H...

    用户1667431
  • 让你的网站用上炫酷的中文字体

    随着当前 Web 技术的日新月异,网页界面内容越来越丰富,让人眼花缭乱,其中就包括了网页中的各种自定义字体。

    米开朗基杨
  • django2用模板代码图标字体丢失报404 cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff

    玩蛇的胖纸
  • Android开发之 全局替换字体

    第一反应是好简单,换个TypeFace不就完了,但是不可能每个控件去设置一个吧?不存在的。

    Xiaolei123
  • iconfont关于content值的坑

    font-carrier是一个功能强大的字体操作库,使用它你可以随心所欲的操作字体。让你可以在svg的维度改造字体的展现形状。 //可以设置某个字对应的形状,当...

    IMWeb前端团队

扫码关注云+社区

领取腾讯云代金券