- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试在我的 React 应用程序中包含自定义字体(使用 create-react-app 制作)。它似乎有点工作,但仅在加载页面后 2-3 秒后。在此之前,文本似乎使用浏览器的默认字体(如 Times New Roman),然后在几秒钟后切换为自定义字体。有人可以向我解释为什么会发生这种情况以及我需要做些什么来解决这个问题吗?
我正在将字体导入我的顶级 App.js
文件,如下所示:
import './fonts/tarrgetital.ttf';
import './App.scss';
并在我的 App.scss
文件中声明它,如下所示:
@font-face {
font-family: 'tarrgetital';
src: local('tarrgetital'), url(./fonts/tarrgetital.ttf) format('truetype');
}
h2 {
font-family: tarrgetital;
}
最佳答案
加载网络字体的延迟是一个预期的行为问题,它的发生是因为浏览器在检测到具有与字体规则匹配的 CSS 选择器的 DOM 元素时加载字体,而这发生在 HTML 文件和所有CSS 文件已下载到客户端。这是一种延迟加载机制。有一些解决方案可以改善这种行为:
使用优化的网络字体文件:
为了获得更好的性能,您可以交换 TTF
中的字体文件字体与 woff
和 woff2
文件格式。这些格式是压缩在 gzip 中,从而减少文件大小和初始客户端下载时间。如果这些格式不可用您可以使用许多在线工具之一来转换字体文件(谷歌 TTF to woff2
).
Webpack 预加载:
在 webpack 4.6.0+ 中你可以预加载模块。这使用preload
在 HTML 链接标签 ( <link rel="preload">
) 中提示。它会告诉浏览器在下载其余资源之前预加载资源。要使用此选项,请替换 import './fonts/tarrgetital.ttf';
与 import(/* webpackPreload: true */ './fonts/tarrgetital.ttf');
更多关于 webpack 预加载的信息:https://webpack.js.org/guides/code-splitting/#prefetchingpreloading-modules以及有关 HTML 预加载提示的更多信息:https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
关于css - 自定义 TTF 字体在 React 应用程序中加载缓慢,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59519085/
我正在开发一个需要能够平均三个数字的 Facebook 应用程序。但是,它总是返回 0 作为答案。这是我的代码: $y = 100; $n = 250; $m = 300; $number = ($y
我只是无法弄清楚这一点,也找不到任何对我来说有意义的类似问题。我的问题:我从数据库中提取记录,并在我的网页上以每个面板 12 条的倍数显示它们。因此,我需要知道有多少个面板可以使用 JavaScrip
我是一名优秀的程序员,十分优秀!