html - CSS @font-face 不适用于多种字体粗细
问题描述
我正在尝试加载一些自定义字体,但由于某种原因,前端只加载了一个权重。我已经检查了开发工具。
这是我的CSS:
/* FONTS */
@font-face {
font-family: 'CalibreWeb';
src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Regular.eot'); /* IE9 Compat Modes */
src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Regular.woff2') format('woff2'), /* Super Modern Browsers */
url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Regular.woff') format('woff'), /* Modern Browsers */
font-weight: 400;
}
@font-face {
font-family: 'CalibreWeb';
src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Semibold.woff2'); /* IE9 Compat Modes */
src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Semibold.woff2') format('woff2'), /* Super Modern Browsers */
url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Semibold.woff') format('woff'), /* Modern Browsers */
font-weight: 600;
}
您可以在此处查看是否有一些文本尝试使用字体粗细为 400 的 CalibreWeb 字体系列(例如 Advice Hub 之后的子标题。)
知道可能是什么问题吗?
解决方案
您的 CSS 语法似乎存在错误,导致某些字体无法加载。
src
要修复语法,请在第二个值的第二行使用分号。
@font-face {
font-family: 'CalibreWeb';
src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Regular.eot');
src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Regular.woff2') format('woff2'),
url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Regular.woff') format('woff');
font-weight: 400;
}
@font-face {
font-family: 'CalibreWeb';
src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Semibold.woff2');
src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Semibold.woff2') format('woff2'),
url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Semibold.woff') format('woff');
font-weight: 600;
}
推荐阅读
- java - JavaFX 中的套接字通信
- matlab - pixelLabelDatastore 来自工作区中加载的图像
- javascript - 如何在单个发布请求中传递多个文件和一个 json 对象
- javascript - 从反应打字稿组件调用外部Javascript函数
- asp.net-core - AppPool 回收后运行 ASP.Net Core 后台任务
- function - 如何在 Firebase Cloud Functions 中的 HTTP 调用中返回随机数?
- assembly - ARM汇编指令#(2*4)的含义
- octopus-deploy - 权限问题章鱼触手
- ember.js - Ember 路由器中是否可以有(未定义数量的)可选段?
- reactjs - 如何使用卡片组件创建手风琴