首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS font-face -when使用多个src描述符

CSS font-face - when使用多个src描述符是指在使用@font-face规则时,可以通过多个src描述符来指定字体文件的来源。

@font-face规则允许网页设计师使用自定义字体,而不仅限于用户计算机上已安装的字体。通过使用@font-face规则,可以将字体文件嵌入到网页中,从而确保用户在浏览网页时能够正确显示所需的字体。

在使用@font-face规则时,可以通过多个src描述符来指定字体文件的来源。每个src描述符都包含一个URL和一个可选的格式描述符。URL指定字体文件的位置,格式描述符指定字体文件的格式。

多个src描述符的使用可以提供备用字体文件,以便在某些情况下,如字体文件无法加载或不受支持的情况下,能够使用备用字体文件来替代。

以下是一个示例的@font-face规则,其中使用了多个src描述符:

代码语言:txt
复制
@font-face {
  font-family: MyFont;
  src: url('font1.woff2') format('woff2'),
       url('font1.woff') format('woff'),
       url('font1.ttf') format('truetype');
}

在这个示例中,使用了三个src描述符来指定字体文件的来源。首先尝试加载font1.woff2文件,如果不支持woff2格式,则尝试加载font1.woff文件,最后如果都不支持,则加载font1.ttf文件。

CSS font-face - when使用多个src描述符的优势是可以提供更好的兼容性和容错性。通过提供多个备用字体文件,可以确保在不同的浏览器和设备上都能够正确显示所需的字体。

应用场景包括但不限于以下情况:

  1. 使用自定义字体来实现特定的设计效果,如品牌标识、标题样式等。
  2. 在网页中使用特殊字体,以增强用户体验和页面效果。
  3. 在移动应用中使用自定义字体,以实现独特的界面设计。

腾讯云相关产品和产品介绍链接地址: 腾讯云提供了丰富的云计算产品和服务,包括云服务器、云数据库、云存储等。以下是一些与CSS font-face相关的腾讯云产品:

  1. 云服务器(CVM):提供可扩展的云服务器实例,可用于部署网站和应用程序。了解更多:云服务器产品介绍
  2. 云数据库MySQL版(CDB):提供高性能、可扩展的云数据库服务,可用于存储网站和应用程序的数据。了解更多:云数据库MySQL版产品介绍
  3. 云存储(COS):提供安全可靠的对象存储服务,可用于存储字体文件和其他静态资源。了解更多:云存储产品介绍

请注意,以上链接仅供参考,具体产品选择应根据实际需求进行评估和决策。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

网页|CSS字体介绍

除了上一节我们讲到的背景以外,字体也是一个我们最常用到的属性,接下来我们就来讲一讲CSS字体。 CSS字体(font)属性定义文本中的字体,我们将从以下几个方面进行介绍。...CSS3服务器端字体 在CSS3之前,Web设计师必须使用已在用户计算机上安装好的字体。...现在通过CSS3 @font-face,Web设计师可以使用他们喜欢的任意字体,并将该字体文件存放到Web服务器上,用户在访问页面时,字体会在需要时被自动下载到用户的计算机上。...@font-face规则中定义的描述符描述符 值 描述 font-family name 必需。规定字体的名称 src URL 必需。...默认是 "U+0-10FFFF" 如果使用服务器端字体,必须首先在@font-face规则中定义字体的名称和位置,然后在HTML元素中通过font-family来引用服务器端字体。 END

2.5K20
  • 突破限制,CSS font-variation 可变字体的魅力

    今天,在 CodePen 上看到一个很有意思的效果 -- GSAP 3 ETC Variable Font Wave,借助了 JS 动画库 GSAP 实现,一起来看看: 我寻思着能否使用 CSS 复刻一版...我们只需通过CSS与一行 @font-face 引用,即可获取包含在这个单一文件中的各种字体变体。 emm,概念有点难理解,简单解释一下。 与可变字体对应的,是标准(静态)字体。...@font-face { font-family: 'Anybody'; src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/ETCAnybodyPB.woff2...Anybody @font-face { font-family: 'Anybody'; src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io...3D 简单构造一下 3D 场景即可,完整的 CSS 代码如下: @font-face { font-family: 'Anybody'; src: url('https://s3-us-west-

    1.2K10

    用webfont为你的网站添加图标

    有些网站的图标不存在对应的图片文件,也并非通过js画图,它们的CSS长这样: h2::before{ content:'\e942' } 实际上e942是这个字符的16进制unicode编码,在unicode...css引入webfont: @font-face { font-family:;/**相当于变量名,可以自己定义,如果元素中的font-family对应这里,@font-face为这些元素定义了字体族,...他们将使用src定义的字体**/ src:;/**使用的字体,可以是local("font名称")或者url("url地址"),支持多个来源**/ } @font-face还可以为不同格式、不同字重的文字匹配字体...,也可以为特定字符匹配特定字体,想了解更多可以参考: https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face 真正了解CSS3背景下的@font...IcoMoon App Ionicons: The premium icon font for Ionic Framework Fontello - icon fonts generator 想了解更多关于css

    92020

    百度Web前端技术学院(1)-HTML, CSS基础

    @font-face CSS3 @font-face 规则 在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体。 通过 CSS3,web 设计师可以使用他们喜欢的任意字体。...当您您找到或购买到希望使用的字体时,可将该字体文件存放到 web 服务器上,它会在需要时被自动下载到用户的计算机上。 您 “自己的” 的字体是在 CSS3 @font-face 规则中定义的。...使用您需要的字体 在新的 @font-face 规则中,您必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件。...: myFirstFont; } CSS3 字体描述符 下面的表格列出了能够在 @font-face 规则中定义的所有字体描述符描述符 | 值 | 描述 font-family |name | 必需...src |URL | 必需。定义字体文件的 URL。

    1K30

    谷歌PageSpeed提示利用font-display控制网页字体可见性的加载和替换

    Web Fonts 以前使用 CSS 指定字体时只能使用用户电脑本地上现有的字体,而由于每个用户电脑上的字体可能都不一样,所以能用的基本上就是操作系统内置的一些字体,例如微软雅黑,宋体,苹果苹方,这些也叫做安全字体...为了使字体显示正常,我们一般会通过 font-family 属性同时指定多个字体,如果第一个字体没有在操作系统中找到,就会使用下一个后备字体( Fallback Font ),以此类推。...再后来CSS 开始支持 @font-face 这个指令,可以加载自定义的字体文件,这个时候可以把字体随网站一起发布,用户在浏览网站的时候,会下载 @font-face 中指定的字体。...font-display 介绍 确切的说“font-display”不属于 CSS 属性,而是专用于 @font-face 指令的描述符,它可以取如下几个值: auto 。...优化代码: 优化前: @font-face {   font-family: "icon"; } 优化后: @font-face {   font-family: "icon";   font-display

    1.4K30

    字体更改

    更改字体 更改字体主要通过引入css实现,具体的代码如下所示: @font-face{ font-family: '字体名字'; src: url('/font/文件名字.ttf') format("...通过在网络上的查找,我首先选择使用的是Robot字体,这个字体族写的英文字体相当漂亮: Robot字体本身是一款非常漂亮的英文字体,Roboto-Medium 字体被广泛用于广告、海报、画册、...最后修改完成后的css代码为: @font-face { font-family: 'Robot'; src: url('/font/Roboto-Medium.ttf') format...@font-face { font-family: 'ZiTiChuanQiXueJiaHei'; src: url('/font/ZiTiChuanQiXueJiaHei-FenSiMianFei...Robot','SourceHanSerifSC-Light','ZiTiChuanQiXueJiaHei',"Microsoft YaHei", sans-serif; } 其中body部分放置多个字体的作用是当所引入的字体在浏览器页面不存在时

    3.5K30

    CSS3魔法堂:认识@font-face和Font Icon

    二、看看例子                            /* 定义 */ @font-face { font-family: 'MicrosoftYaHei'; src: url...src :设置字体的加载路径和格式,通过逗号分隔多个加载路径和格式 srouce :字体的加载路径,可以是绝对或相对URL。...font-weight 和 font-style 和之前使用的是一致的。 src属性后还有一个 local(font name) 字段,表示从用户系统中加载字体,失败后才加载webfont。...@font-face遵循先定义后使用原则;   2. 由于中文字体太大,因此建议若中文LOGO还是使用图片。而英文LOGO则可使用@font-face代替图片;   3....@font-face无效有可能是字体的加载路径错误;   4. FireFox中@font-face的字体加载路径使用相对路径时,可能会失败,具体原因和解决办法如下:       a).

    2K80

    通过CSS盗取你的密码

    你可以看见CSS中import js可以成功发起请求,但是不会解析JS 第二种,通过font-face去获取页面中的敏感数据 攻击场景:一些比较敏感的资料,一些重要任务浏览或者编写而成 先了解一些前置知识...,这是指定名为"myFirstFont"的字体,并指定在哪里可以找到它的URL: @font-face { font-family: myFont; src: url('https://china-dev.cn...默认值是"ü+0-10 FFFF",文档地址:https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range unicode-range...; /* 多个值 */ unicode-range的常用unicode值及获取 对于我们中文用户,最常用的有下面这些: 汉字:[0x4e00,0x9fa5](或十进制[19968,40869]) 数字...{ font-family: myFont; src: url('https://china-dev.cn'), unicode-range:******* } CSS其他攻击手段 CSS攻击手段在我看来

    81830
    领券