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

@font-face无法在chrome中使用WOFF / TFF

@font-face是CSS3中的一个属性,用于在网页中加载自定义字体。通过@font-face,开发者可以将自己的字体文件(通常是TTF、WOFF、WOFF2格式)上传到服务器,并在网页中引用它们。

然而,有时候在Chrome浏览器中使用@font-face加载WOFF或TTF字体时,可能会遇到一些问题。以下是可能导致问题的原因和解决方法:

  1. 跨域访问:Chrome浏览器对跨域字体的访问有限制,只能从同一域名或同一域名的子域名加载字体文件。解决方法是确保字体文件和网页文件在同一域名或同一域名的子域名下,并且在CSS中使用相对路径或绝对路径引用字体文件。
  2. MIME类型设置:服务器未正确设置字体文件的MIME类型可能导致字体加载失败。在服务器上将字体文件的MIME类型设置为"application/x-font-woff"(WOFF格式)或"application/x-font-truetype"(TTF格式)可以解决此问题。
  3. 字体文件路径错误:请确保在CSS中正确指定了字体文件的路径,包括文件名和文件后缀。同时还需要确保字体文件在指定路径下存在,并且可被访问到。

综上所述,若在Chrome浏览器中无法使用WOFF或TTF字体,可以通过解决跨域访问、设置正确的MIME类型以及检查字体文件路径的方式来解决问题。

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

相关·内容

(转载非原创)前端网页字体优化指南

日常开发网页经常会使用一些特殊字体,比如思源黑体、苹方字体等,因为这些字体一般的宿主环境是不存在的,需要通过 css 的 @font-face 定义,并从服务器中加载对应的字体文件,而字体文件一般都是比较大的...该库的周下载量达到 10w+ 的,可见好多人都会有将 tff 转换成 woff2 的需求。...目前我还没有发现哪个线上网站或 node 库能一步到位转换的, google 上搜索好几个线上转换的网站,要么转换完成后无法下载 ,要么转换下载后是个空文件,反正就是不靠谱的东西。...下面来看一下如何使用: css 通过 @font-face 定义一个字体: @font-face { font-family: 'myfont'; src: url('..../myfont.woff2') format('woff2'); } 注意,CSS 只需要定义字体就行,而不要使用使用这个字休。

1.2K00

基于jsDelivr+Github给网站如何换个漂亮的字体。

字体下载站 转换自己的字体包格式 当我们下载字体之后会有一个压缩包 里面会有一个.ttf的字体文件包 因为有些浏览器不支持这种字体的格式显示 所以我们需要对字体格式转换 如果不进行转换字体格式,有些浏览器会无法显示自己设置的喜欢的字体...如果你毫无技术不会转换字体格式不要怕,这里我给你们提供一个免费快捷的字体转换网站 字体格式在线转换器 你只需要转换.ttf文件为eot,woff,woff2,svg,tff 格式 如下图,我已经用红色框框给你标记...,按图操作即可 使用字体 将字体文件上传到GitHub仓库 这个有很多方法,可以将字体存储cos,oss或者本地,本地的话会加载非常缓慢 不利于网站速度优化,cos,oss非常耗费流量,早上一起来可能不注意一套房子就没了...编写css字体样式代码 如果你是小白不懂css,这没关系,只需要按照我的方法即可 代码格式如下: @font-face{ font-family: 'zti'; src: url('文件直链.tff...'); src: url('文件直链.eot'); src: url('文件直链.svg'); src: url('文件直链.woff'); src: url('文件直链.woff2'); }

76820
  • Typecho博客自定义字体

    字体网,上面的字体都是免费商用的,找到你喜欢的下载下来 尽量不要下载太大的字体,因为将用户加载容易变慢,影响体验,当然,服务器配置叼的当我没说过这句话 转换字体文件格式 我们下载好,打卡压缩包就会看到 tff...后缀的字体文件 根据浏览器版本的不同,各种浏览器有时间不会识别读写出来此文件后缀格式,自然文字也不会读写出来,这时间我们就需要准备好多类型的字体文件格式, eot,woff,woff2,svg及...css文件定义属性,一般是style.css @font-face{ font-family: 'qz'; src: url('文件直链.tff'); src: url...} 最后body里加上,下面代码刷新即可,不出来字体就清除缓存 font-family: 'qz'; 第二种 ,如果存oss里记得跨添加域访问CORS规则 不想麻烦就按提示,填*就完事了,最后一样...,定义css并在body引用,就是这样滴 刷新访问或清除缓存访问即可看到,效果如下 第三种 ,也是最推荐的一种,我们可以把字体文件存在github,通过jsdelivr的cdn全球加速,简单,

    2K20

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

    @font-face遵循先定义后使用原则;   2. 由于中文字体太大,因此建议若中文LOGO还是使用图片。而英文LOGO则可使用@font-face代替图片;   3....@font-face无效有可能是字体的加载路径错误;   4. FireFox@font-face的字体加载路径使用相对路径时,可能会失败,具体原因和解决办法如下:       a)....使用绝对路径可解决问题;       b). file uri scheme的情况下(file:///),由于FireFox默认的file uri origin策略十分严格,不同路径等级则无法访问。...六、Font Icon                          大家应该使用过 © 这类符号实体,从而在页面上显示一些无法通过键盘直接输入的符号。...但这类符号实体是固化浏览器,没办法对其进行自定义,所以我们往往会使用图片来代替。

    2K80

    04-移动端开发教程-在线字体图标

    IE4开始微软就已经开始支持在线字体,不过没有流行起来,直到CSS3新增加了font-face模块,正式纳入了web开发的标准。也渐渐流行起来而且发掘了很多其他应用。 1....低质量的位图高清设备上放大后会有难看的锯齿,无法满足响应式页面的开发需求 在线字体带来的革命: 在线字体本质就是文字,但是也可是像图形的文字。...在线字体 @font-face是CSS3的一个模块,他主要是把自己定义的Web字体嵌入到你的网页,允许我们不依赖操作系统的字体,做到全平台字体统一和定制。...这就意味着@font-face我们至少需要.woff,.eot两种格式字体,甚至还需要.svg等字体达到更多种浏览版本的支持。 4....使用方法如下:(非常类似bootstrap) <link rel="stylesheet" href=".

    3.2K60

    CSS使用字体新姿势 unicode-range用法与使用场景

    WOFF2的字体文件,WOFF字体自带压缩功能,所以会比通常的TTF字体文件更小,WOFF2则WOFF的基础上更进一步压缩,所以实际的体积应该会更小。...还有就是在这个样式文件,多次使用@font-face规则定义同一个字体ZCOOL KuaiLe,但是每一个使用的src资源都不一样,我想到的就是分片,把一个字体文件拆分成多个细小的文件,然后利用游览器并行下载来提升加载速度...这里使用一下张鑫旭老师整理的一些显示方式: HTML字符输出使用&#x配上charCode值。 JavaScript文件为防止乱码转义,则是\u配上charCode值。...') format('woff2'), url('//at.alicdn.com/t/webfont_zs8eec7orz.woff') format('woff'), /* chrome、firefox...') format('woff2'), url('//at.alicdn.com/t/webfont_36avzt164so.woff') format('woff'), /* chrome、firefox

    2.5K10

    认识 Iconfont 以及什么是 .eot、.woff、.ttf、.svg「建议收藏」

    概述 在前端作业,二十年前只有页面中铺满文字就算上线产品,现如今,不加点俏皮的“图标”会让页面显得很 Low 很 Low。...如果我们要使用它们,也只需要在 css 文件中使用 @font-face 引入这种字体即可。@font-face 是 css3 的一个语法,刚兴趣的可以自行阅读 @font-face 用法 。 2....概述 阿里图标库中下载图标到本地后,目录结构如下: 图标库下载到本地目录结构 第一次看到这几个文件时,不知道有什么用,可能会直接删除,但万万不可,打开 iconfont.css 文件可以 @font-face...这种格式只IE6-IE8里使用。【支持的浏览器:IE4+】 OTF / TTF OpenType Font 和 TrueType Font。...Iconfont 下载字体到本地,那么恭喜你,打开 iconfont.css 文件,可以看到 Iconfont 已经帮助你配好了这些内容,你只需要在页面引入 iconfont.css 即可直接使用

    3.4K10

    04-移动端开发教程-在线字体

    IE4开始微软就已经开始支持在线字体,不过没有流行起来,直到CSS3新增加了font-face模块,正式纳入了web开发的标准。也渐渐流行起来而且发掘了很多其他应用。 1....低质量的位图高清设备上放大后会有难看的锯齿,无法满足响应式页面的开发需求 在线字体带来的革命: 在线字体本质就是文字,但是也可是像图形的文字。...在线字体 @font-face是CSS3的一个模块,他主要是把自己定义的Web字体嵌入到你的网页,允许我们不依赖操作系统的字体,做到全平台字体统一和定制。...这就意味着@font-face我们至少需要.woff,.eot两种格式字体,甚至还需要.svg等字体达到更多种浏览版本的支持。 4....使用方法如下:(非常类似bootstrap) <link rel="stylesheet" href=".

    3.3K60

    在网页中使用自定义字体

    @font-face是CSS3的一个模块,他主要是把自己定义的Web字体嵌入到你的网页,随着@font-face模块的出现,我们Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许多人会不自然的问...我的Blog就使用了许多这样的自定义Web字体,比如说首页的Logo,Tags以及页面的手写英文体,很多朋友问我如何使用,能让自己的页面也支持这样的自定义字体,一句话这些都是@font-face实现的...#iefix') format('embedded-opentype'), url('fontName.woff') format('woff'), url('fontName.ttf...+,Safari3+,Opera10+,iOS Mobile Safari4.2+】; 二、OpenType(.otf)格式: .otf字体被认为是一种原始的字体格式,其内置TureType的基础上,...Font Format(.woff)格式: .woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+

    1.8K10

    第104天:web字体图标使用方法

    只能使用平台里单色的图标,就算项目里有多色图标也会自动去色   注意:新版iconfont支持多色图标,这些多色图标Unicode模式下将不能使用,如果有需求建议使用Symbol的引用方式   使用步骤如下...--"iconfont"是你项目下的font-family,默认是"iconfont"--> 3是字体编码,可在下载的demo.html查看,或者可以阿里矢量图标库的网站上,进入我的项目查看...--"iconfont"是你项目下的font-family,默认是"iconfont"--> icon-xxx是使用了unicode引用的类名,可在下载的demo.html查看,或者可以阿里矢量图标库的网站上...#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('iconfont.woff') format('woff'), /* chrome,.../fonts/iconfont.woff') format('woff'), /* chrome、firefox */ url('..

    1.4K10
    领券