html - 应用网络字体样式时,文本 Logo 不规则地改变形状

标签 html css webfonts google-webfonts

我正在尝试将 Roboto 用于基于文本的 Logo ,并且有必要的代码来加载 <head> 中的字体。 .在加载站点时,您可以在以 Web 字体正确格式化之前短暂地看到丑陋的默认字体中的 Logo 。 Logo 从字面上变大然后变小。此类问题是否表明代码实现不当或其他问题?

如果问题不能笼统回答,我很乐意上传相关代码部分。

最佳答案

一种选择是告诉浏览器预加载您的字体。

这是一个例子:

<link rel="preload" as="font" href="/fonts/custom-font.woff2" type="font/woff2" crossorigin="anonymous">

如果您使用的是 Google Fonts (Roboto) 之类的 CDN,请确保您预加载的字体文件与 CSS 中的文件相匹配,否则您最终可能会下载相同字体的两个版本。

希望这对您有所帮助!

关于html - 应用网络字体样式时,文本 Logo 不规则地改变形状,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57830806/

相关文章:

javascript - 未捕获的类型错误 - 无法读取 null 的属性 'owlcarousel'

html - 使用不使用空格的语言使一段文本不间断

JavaScript 和 html 幻灯片

javascript - 在 html/javascript/css 中隐藏复选框边框

html - 下拉菜单在 Safari 下不起作用

css - 我应该在哪个 CSS 样式表中放置我的网络字体?

webfonts - Web 字体在某些 Firefox 中不起作用(包括 Google 字体示例页面)

html - 找出icon-font图标的unicode字符编码

html - 删除 HTML 按钮/提交的完整样式

javascript - 我如何从视频中检测字幕并将其复制到文本区域