如何在 Google WebFont Loader 中调整样式

发布于 2025-01-18 03:04:33 字数 971 浏览 2 评论 0原文

我有这段代码可以异步加载 Google 字体以避免渲染阻塞，我在结束代码的之前就有了它。

<script type="text/javascript">
      WebFontConfig = {
        google: {
          families: ['Poppins:300,400,500,600,700']
        }
      };
      (function(d) {
        var wf = d.createElement('script'),
          s = d.scripts[0];
        wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
        wf.async = true;
        s.parentNode.insertBefore(wf, s);
      })(document);
    
    </script>

问题是数字的宽度不同？风格？我希望 TextArea 中的所有数字都相同，而不是如下所示： Imgur

PS：我正在使用 Poppins，如果我以常见的方式加载字体（<链接href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">) 此错误确实不会发生。

我从 Google WebFont Loader 获取的代码

原文

I have this code that asynchronously loads Google Fonts to avoid render blocking, I have it before ending the </body> of my code.

<script type="text/javascript">
      WebFontConfig = {
        google: {
          families: ['Poppins:300,400,500,600,700']
        }
      };
      (function(d) {
        var wf = d.createElement('script'),
          s = d.scripts[0];
        wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
        wf.async = true;
        s.parentNode.insertBefore(wf, s);
      })(document);
    
    </script>

The problem is that the numbers have different widths? styles?
I want all the numbers to be the same in my TextArea and not look like this:
Imgur

PS: I am using Poppins and if I load the fonts in a common way (<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">) this error does not happen.

The code I took from Google WebFont Loader

分享到QQ

分享到微博