图标按钮在加载前初始渲染时显示文本 - 谷歌字体

Answer 1

您可以在参数中设置

display

，其作用与 CSS

font-display

属性相同。

在此处了解更多信息。

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200&display=block" />

<span class="material-symbols-outlined">
delete
</span>

Answer 2

将

&display=swap

附加到

https://fonts.googleapis.com/...

资源 URL 的末尾，它将告诉浏览器将图标作为块元素短暂加载，直到正确加载字体文件。

至少，这是几年前流行时的想法。

从那时起，许多开发人员开始使用

display=block

来减少移位，因为“交换”使用的默认“块”周期通常很短，以至于有时无效......

更多：https://www.smashingmagazine.com/2021/05/reduce-font-loading-impact-css-descriptors/

比较字体显示选项：https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display