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

@font-face和@font-family不工作

@font-face和@font-family是CSS中用于自定义字体的规则。

@font-face规则用于定义自定义字体,使得网页可以使用非系统默认字体。通过@font-face规则,可以将字体文件加载到网页中,并指定字体的名称、文件路径和格式。

@font-family规则用于指定字体的名称,以便在网页中使用。通过@font-family规则,可以将自定义字体应用于网页中的元素。

当@font-face和@font-family不工作时,可能有以下几个原因:

  1. 字体文件路径错误:确保字体文件的路径正确,并且可以在网页中正确加载。可以使用相对路径或绝对路径指定字体文件的位置。
  2. 字体格式不支持:不同浏览器支持的字体格式不同,常见的字体格式包括TrueType (.ttf)、OpenType (.otf)、Web Open Font Format (.woff)等。确保字体文件的格式与浏览器的支持格式匹配。
  3. 跨域资源共享(CORS)问题:如果字体文件位于不同的域名下,可能会受到浏览器的跨域限制。可以通过在服务器端设置CORS头部来解决跨域问题。
  4. 字体名称错误:确保在@font-family规则中指定的字体名称与@font-face规则中定义的字体名称一致。字体名称区分大小写。
  5. 浏览器不支持:某些旧版本的浏览器可能不支持@font-face规则或某些字体格式。可以通过使用Web字体服务或字体替代方案来解决兼容性问题。

推荐的腾讯云相关产品:腾讯云字体库(https://cloud.tencent.com/product/ttc)

腾讯云字体库是一个在线字体服务平台,提供了丰富的字体资源供开发者使用。通过腾讯云字体库,可以方便地获取各种字体文件,并在网页中应用自定义字体。

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

相关·内容

Windows凭据工作

如果不是敲错IP、用户名、密码,报凭据工作,一般情况下执行这几句命令后重启远程服务就正常了第1句:REG ADD "HKLM\SOFTWARE\Policies\Microsoft\Windows NT...vnc能进入系统,通过远程就是报凭据工作上次我遇到个case,参考https://cloud.tencent.com/document/product/213/39166 排查一遍没解决,最后结合下面的方法三方法四解决的一般情况下...NTLM服务器身份验证" , 分别对他们进行下面第3步第4步的配置。...image.png2、选择 计算机配置 --> windows设置 --> 安全设置 --> 本地策略 --> 安全选项 --> 网络访问: 本地帐户的共享安全模型,双击它即可打开。...及以上系统图片.png图片.png方法四:image.png一般情况下,方法三方法四要一起用才有效

6.1K20
  • Fonts最佳实践

    本文分为三个部分:字体加载、字体交付字体呈现。每一节都解释了字体生命周期的那个特定方面是如何工作的,并提供了相应的最佳实践。...字体加载 在深入探讨字体加载的最佳实践之前,重要的是要了解@font-face是如何工作的,以及它是如何影响字体加载的。 @font-face声明是使用任何网络字体的一个重要部分。...") format("woff2"); } body { font-family: "Open Sans"; } 建议嵌入字体文件本身...如果你使用自己的字体,建议你也应用一些第三方字体供应商通常自动提供的字体文件优化——例如,字体子集WOFF2压缩。应用这些优化所需的工作量将在一定程度上取决于你的网站所支持的语言。...可变字体的工作方式是定义一个 "默认 "的字体样式,并提供操作字体的 "轴"。例如,一个带有 Weight轴的可变字体可以用来实现以前需要为浅色、普通、粗体特粗的字体分开的字体。

    2.9K72

    前端字体截取技术,做炫酷网站再也不用怕中文字体数据量大啦!【实战】

    无论是“软截取”,还是“硬截取”,都会用到Web字体 @font-face 规则。因此,我们需要先来了解一下这个基础的Web标准语法。...web 此时,我们发现标点(逗号句号)的样式与其他文字统一,而其他文字使用的是“苹方”(PingFang SC)字体(在Mac上)。...无论如何,我们可以再定义一个只包含逗号句号两个字符的自定义字体来解决这个问题: @font-face { font-family: punc; src: local(PingFang SC);...、SafariFirefox也都可以将逗号句号显示为“苹方”字体了: [image.png] 注意,不要试图基于英文字体自定义 punc 字体,因为英文字体中包含对中文标点符号对应码点的映射。...但是要注意,CSS文件输出都没有包含 font-family 属性,也就是没有自定义字体的名字( custom ),使用时必须自己手工加上。

    2.7K20

    修改网页自定义字体的CSS代码+图文教程

    除了人山人海,高速堵车,高铁全是人之外其他都还好啦,是不是,哈哈哈~~~好了,闹了,在假期有朋友问我,想要修改网页的字体怎么办?怎么更换网页的字体,又如何引用自定义字体呢?...首页我们要引用字体文件代码,代码参考如下: @font-face {     font-family: 'talklee';     font-display: swap;     src: url('...important; } font-family:为字体名称,可自定义但是需要确保两次“font-family”引用的名称一致才行。 附上一张引用自定义的效果图: ?...PS:获取@font-face所需字体格式,特殊字体已经在你的电脑中了,现在我们需要想办法获得@font-face所需的.eot,.woff,.ttf,.svg字体格式。...“yes”转换完成点击“down”下载,然后把下载到的字体文件上传到服务器空间,引用主题路径就OK啦,下图是转换下载到本地的图片,大概就这样啊吧,我的演示文字小,所以可能不全,只需要字体文件,其他文件css

    2.3K20

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

    再后来CSS 开始支持 @font-face 这个指令,可以加载自定义的字体文件,这个时候可以把字体随网站一起发布,用户在浏览网站的时候,会下载 @font-face 中指定的字体。...这个是 font-display 的默认值,字体的加载过程由浏览器自行决定,不过基本上取值为 block 时的处理方式一致。 block 。...优化代码: 优化前: @font-face {   font-family: "icon"; } 优化后: @font-face {   font-family: "icon";   font-display...: swap; } 其中“font-family”后面根据实际情况设置,可以奥森或者阿里图标再或者一些特效等等。...性能检测工具应该怎么优化了,当然有问题的还不这一点,后期遇到感兴趣的在记录吧,目前PC端优化完成已经达到90+,就差移动端优化了,加油吧,继续努力,做到无论PC还是移动端均是90+就满意了,对了,模板优化是完成了,包含独立购买的插件可能还是会引起部分性能的扣分

    1.4K30

    Iconfont在教育平台的实践

    矢量图,两个方案,svgiconfont。svg雪碧图只兼容IE9+,而平台仍需要支持IE8的用户,为了避免矢量图位图两套方案,选择了兼容性更好的iconfont,可以完美兼容到IE6。...锯齿,锯齿,还是锯齿 虽然icon font很大程度上减少了资源大小,节省了开发工作量,一定程度上也优化了代码,并形成一个新的可遵循的规范,但目前它的表现还不是那么完美,离图片还是有点距离的 ie8浏览器对圆形的...有一定的虚边,这个跟字体本身有关系,所有的文字字体渲染都有一定的虚边 兼容问题 网上iconfont.cn给出的推荐写法是: [@font-face](/user/font-face) {...font-family: 'iconfont'; src: url('iconfont.eot'); /* IE9*/ src: url('iconfont.eot?...](/user/font-face) { font-family: 'iconfont'; url('fonts/webfont.eot?

    1.2K20

    字体更改

    更改字体 更改字体主要通过引入css实现,具体的代码如下所示: @font-face{ font-family: '字体名字'; src: url('/font/文件名字.ttf') format("...truetype"); } body { font-family: '字体名字'; } 其中@font-face相当于创建一个字体族,然后下边body部分是在应用字体族,那个名字其实就是在前边创建的字体的名字...另外在寻找字体时我在谷歌字体上发现了一款比较美观的中文字体,但由于该字体Robot字体混排大小不太美观遂没有采用: 这里拿标签的显示效果做一个说明,可以看出该字体的英文效果不是很让人满意。...最后修改完成后的css代码为: @font-face { font-family: 'Robot'; src: url('/font/Roboto-Medium.ttf') format...') format('woff'); font-size: 4em; } @font-face { font-family: 'SourceHanSerifSC-Light';

    3.5K30

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

    基本语法如下: @font-face { font-family: ; src: url(''); font-variant...它们的工作原理如下: ? 我选择使用 font-spider-plus,毕竟改版过的,bug 更少,功能更多,还支持线上动态渲染的页面。唯一的不足就是官方文档写的太含糊了,许多人看了根本不知道怎么用。...也很简单,先写个 CSS 通过 @font-faxe 引入压缩后的字体,格式与第一步中的 index.html 类似: /* fonts-zh.css */ @font-face { font-family...('eot'); font-weight: normal; font-style: normal; } @font-face { font-family: '$font';...这还不够,为了造福大众,我在 GitHUb 中新建了一个仓库,所有的脚本步骤都在上面,有需求的小伙伴可以拿去 happy 啦~~ 项目地址:https://github.com/yangchuansheng

    2.6K20
    领券