我决定在我的 Angular 元素中使用 ubuntu 字体系列。我成功地覆盖了它。但是当我刷新页面时，页面以默认字体开始，然后在几毫秒内变成我的 ubuntu 字体。我只想它以 ubuntu 开头而不是其他的东西。我怎样才能删除 html 的默认字体。
下面是我的 styles.css
* {
font-family: 'Ubuntu';
}
我如何在 angular.json 的 asset 下定义 fonts.css
"styles": [
"src/styles.css",
"src/assets/css/fonts.css",
],
我的 fonts.css 下有什么
@font-face {
font-family: 'Ubuntu';
font-display: swap;
font-style: normal;
font-weight: 300;
src: url('../fonts/ubuntu-v12-latin-ext_latin_cyrillic-300.eot');
/* IE9 Compat Modes */
src: local('Ubuntu Light'), local('Ubuntu-Light'), url('../fonts/ubuntu-v12-latin-ext_latin_cyrillic-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/ubuntu-v12-latin-ext_latin_cyrillic-300.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/ubuntu-v12-latin-ext_latin_cyrillic-300.woff') format('woff'), /* Modern Browsers */
url('../fonts/ubuntu-v12-latin-ext_latin_cyrillic-300.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/ubuntu-v12-latin-ext_latin_cyrillic-300.svg#Ubuntu') format('svg');
/* Legacy iOS */
}
我的控制台的屏幕截图向您展示了它是如何被覆盖的
最佳答案
当您使用文件中的自定义字体(使用 @font-face )时，浏览器必须先下载该字体才能使用它(除非该字体已存在于用户的计算机上)。虽然仍在获取自定义字体的过程中，大多数浏览器将以后备字体呈现所有受影响的文本。这个短暂的时刻就是所谓的“无样式文本闪现”(FOUT)。
虽然没有保证可以防止 FOUT 的方法，但有一些方法可以改善这种情况。我将概述两个。
预加载字体
将此添加到 <head>在包含 CSS 之前，您的页面:
<link rel="preload" href="../fonts/ubuntu-v12-latin-ext_latin_cyrillic-300.eot" as="font">
这让浏览器知道您想要以高优先级预加载字体，以便它尽快可用。更多详情可参见this Google article .
使用 font-display
更改您的 font-display规则为block :
font-display: block;
这告诉浏览器在加载自定义字体之前不显示任何文本。更多详情可参见the same article
关于html - 如何删除 HTML 的默认字体？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58481391/