@font-face 加载字体引用字体之后不起作用

最新推荐文章于 2024-07-25 11:53:47 发布
最新推荐文章于 2024-07-25 11:53:47 发布
阅读量1.8w 收藏 2
点赞数 2
分类专栏： css3 文章标签： css3 @font-face
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/topc2000/article/details/79610418
版权

出现不起作用的时候应该检查如下几个方面

第一：路劲是否正确，可以打开控制台，查看网络请求中是否有对应字体文件的请求操作

第二：IE9 + 虽然支持font-face但是只能 引用embedded 系列的字体 必须在src ：url (xxxx)  加上format('embedded-opentype')

第三：如果是在canvas中使用 引入的字体，出现了不生效，或者首次加载不生效的时候。在body标签canvas画布之前加一个<h></h>

<body style="width: 100%;height: 100%">
<!--启用字体-->
<h1 style="position: absolute;top: -500px;display: block;">　</h1>
<canvas class="loadding" style="">

</canvas>

设置h1的字体家族为 引入的字体就好。这样做的目的是告诉浏览器，这个字体被启用了。

html, body {
            padding: 0;
            margin: 0;
            font-family:"Zephyrea";
        }
伍肆伍柒
关注
专栏目录
CSS @font-face不生效问题
weixin_34061555的博客
12-12 1万+
今天在项目中使用了外部字体 使用font-face引入后发现字体微生效 控制台network查看字体也确实加载了 后来发现是font-face写错了 font-face的font-family属性要跟引用字体的名称一样 贴段代码一目了然 @font-face { font-family: "SourceHanSansCN-Bold"; src: url('./src/assets/font/...
字体加载利器：FontFaceObserver 使用指南
最新发布
gitblog_00013的博客
08-09 398
字体加载利器：FontFaceObserver 使用指南 fontfaceobserverWebfont loading. Simple, small, and efficient.项目地址:https://gitcode.com/gh_mirrors/fo/fontfaceobserver 项目介绍 FontFaceObserver 是一个简单高效的Web字体加载器，它通过提供基于Promi...
font-face和font-family不生效
少油少盐不要辣
01-01 1339
transfonter
iconfont 图标库引入(@font-face)后不生效问题
汤一飞
07-25 239
埋点代码埋到网站后, 新引入的字体文件始终不显示。
HTML里face作用,html5 – @ font-face在子文件夹中的字体时不起作用
weixin_35843035的博客
06-16 396
样式表需要位于字体和HTML文件之间的绝对路径上：HTML-File: domain.tld/index.htmlcss-File : domain.tld/assets/stylesheets/stylesheet.cssFONT-File: domain.tld/assets/stylesheets/font/pfdindisplaypro-reg-webfont.woff然后将样式表更新为：...
使用font-face艺术字失效
Lynn_z的博客
06-21 691
css中font-face使用艺术字容易失效的小细节
使用font-face改变字体即加载外部字体
09-25
在@font-face声明之后，可以通过font-family属性引用这些字体。在这个示例中，我们有三个div元素（类名为a、b、c），每个元素都使用了不同的@font-face声明中定义的字体，并且都设置了24像素的字体大小。类名为c的...
CSS3 @font-face网页中的字体
04-23
【CSS3 @font-face网页中的字体】 在网页设计中，字体的选择对于页面的视觉效果有着至关重要的作用。CSS3引入的`@font-face`规则，让网页设计师能够使用非系统默认的字体，从而打破传统浏览器对字体的限制，提供更...
CSS3通过@font-face加载字体文件
03-25
通过@font-face能够加载服务器端的字体文件 font-family: "MOOC Font"; 表示该字体文件的引用，可以自定义 src: url("../other/niuniu_body.ttf"); 表示指定字体文件的路径 可以去...
html5自定义字体@font-face
07-28
浏览器会根据支持的格式来加载字体。 - `font-weight` 和 `font-style`: 可以用于指定字体的粗细（如 bold）和样式（如 italic），与常规CSS属性一样。 为了确保跨浏览器兼容性，通常需要提供多种字体格式，因为...
@font-face ie下不生效问题
justS0的博客
06-08 9091
@font-face { font-family: "fffzzz"; src:url('./font.ttf'); src:url('./font_otf.otf'); src:url('./font_woff.woff'); src:url('./font_eot.eot'); } 以上写法ie生效了  chrom不生效 @font-face 在ie
html引用不了自定义字体,html5 – 自定义@ font-face不加载chrome(chrome自定义字体无法渲染)...
weixin_39710561的博客
06-15 806
自定义@ font-face不加载chrome(chrome自定义字体无法渲染)使用CSS自定义字体@font-face {font-family:'gotham-rounded-medium';src:url('fonts/gothumrounded_medium/gotham-rounded-medium.eot');src:url('fonts/gothumrounded_medium/go...
IE8下@font-face引入特殊字体兼容问题（format|?#iefix|两个url三问）
九日的博客
05-06 2185
问题表现： 使用@font-face引入自定义特殊字体，在IE8环境下报错“@font-face遇到了未知错误”，表现为字体丢失。 问题分析： 我们常用的字体文件的格式如： TrueType、Web Open Font格式对于IE浏览器来说，在IE9+版本才支持。IE8只支持Embedded Open Type格式的字体文件(.eot)。所以IE8环境下，想要引入自定义特殊字体，只能想办法转换...
CSS 中的自定义字体模块 @font-face
-1
02-05 1008
针对WEB页面开发过程中的自定义字体需求，会用到CSS中的@font-face模块。下面是@font-face的语法规则。 @font-face { font-family: <YourWebFontName>; src: <source> [<format>][,<source> [<format>]]*; ...
关于@font-face
Freeky_ge的博客
05-25 897
@font-face是CSS3中的一个模块，通过@font-face可以定义一种全新的字体，然后就可以通过css属性font-family来使用这个字体了，即使操作系统没有安装这种字体，网页上也会正常显示出来。用法：&lt;style&gt; @font-face { font-family: myFirstFont; src: url('Sansation_Light.ttf'), ...
HTML的字体置顶无效,css中导入外部字体不生效的原因是什么？
weixin_39925031的博客
06-02 806
css中可以使用@font-face引入外部字体，使用@font-face规则，网页设计师再也不必使用的"web-safe"的字体之一。有时使用@font-face规则引入外部字体不生效是什么原因？出现不起作用的时候应该检查如下几个方面：第一：路径是否正确，可以打开控制台，查看网络请求中是否有对应字体文件的请求操作第二：IE9 + 虽然支持font-face但是只能 引用embedded 系列的字...
html外部字体放到服务器不能显示,网站外部字体本地可以正常显示，服务器不能正常显示
我不晓得
12-27 952
这个问题遇到了第二次了，不希望下次遇到还百度，写下来记住。 打开IIS管理器 在网站选项中找到你的项目对应的网站 找到MIME类型，双击打开 .woff .woff2.otf后缀 不存在点击鼠标右键添加，比如是.otf后缀的 文件扩展名填 .otf MIME类型填 application/x-font-opentype ...
牛散村:html5中web字体加载方案优化
weixin_45378258的博客
08-10 351
对于不少的开发者来说​，他们对网页字体使用会相对接触比较少一些，使用最多也无非是 font-family ，那么今天呢！我们就来分享有关于“html5中web字体加载方案优化小结！！干货分享！！！”这方面的内容！希望大家可以有所收获！ 代码： @font-face { font-family: 'family-name'; src: url('${url}'); } .main { font-family: 'family-name'; } 然而实际开发过程中，往往会遇到更多的问题，比如
@font-face 加载字体慢，如何解决
05-05
@font-face 加载字体慢的原因可能是因为字体文件太大或者网络传输速度较慢。以下是一些可能的解决方案： 1. 优化字体文件大小：可以通过压缩字体文件或者选择文件格式来减小字体文件大小。 2. 使用字体子集：将字体文件压缩到包含网站所需字符的子集，这样可以减小字体文件大小并加快加载速度。 3. 使用 CDN：使用 CDN（内容分发网络）来加速字体文件的加载速度。CDN 可以缓存字体文件并将其分发到全球各地的服务器上，这样可以减小网络传输的延迟。 4. 使用 Web 字体：使用 Web 字体（如 Google Fonts）可以避免使用 @font-face 加载字体，因为这些字体已经被浏览器缓存，可以更快地加载。 5. 减少字体文件数量：使用相同的字体文件来减少字体文件数量，这样可以避免浏览器在加载字体文件时进行多次 HTTP 请求。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值