To show characters "ă" and "â" in my website from Poppins font, I need to load 2 different font files. How can I load only one single file?

huangapple go评论73阅读模式
英文:

To show characters "ă" and "â" in my website from Poppins font, I need to load 2 different font files. How can I load only one single file?

问题

为了在我的网站上显示字符 ă,我需要从谷歌字体加载下一个字体:https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecmNE.woff2

为了在我的网站上显示字符 â,我需要从谷歌字体加载下一个字体:https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecg.woff2

这里是我在谈论什么:

对于 ă

<style>
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2');
}
h1{
  font-family:Poppins;
  font-size:46px
}
</style>
<h1>ă &#226;</h1>

对于 ă

<style>
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
}
h1{
  font-family:Poppins;
  font-size:46px
}
</style>
<h1>ă &#226;</h1>

不确定为什么会发生这种情况,但我应该怎么做才能加载只一个字体文件?

英文:

In order to show the character ă în my website, I need to load from google fonts the next font: https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecmNE.woff2

To show the character â in my website, I need to load from google fonts the next font: https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecg.woff2

Here you can see what I'm talking about:

For ă:

&lt;style&gt;
@font-face {
  font-family: &#39;Poppins&#39;;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format(&#39;woff2&#39;);
}
h1{
  font-family:Poppins;
  font-size:46px
}
&lt;/style&gt;
&lt;h1&gt;ă &#226;&lt;/h1&gt;

https://jsfiddle.net/y75on1fb/

For ă:

&lt;style&gt;
@font-face {
  font-family: &#39;Poppins&#39;;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecg.woff2) format(&#39;woff2&#39;);
}
h1{
  font-family:Poppins;
  font-size:46px
}
&lt;/style&gt;
&lt;h1&gt;ă &#226;&lt;/h1&gt;

https://jsfiddle.net/z3vn9cx1/

Not sure why is this happening, but what should I do to load only one font file ?

答案1

得分: 1

不确定您从哪里获取了gstatic的URL,但这些似乎是用于缓存的Poppins Reglar字体的变种或者可能是Poppins Bold字体的定位器。如果您访问Google Fonts Poppins页面并选择Regular,它们将为您提供在您的网站中使用字体所建议使用的HTML或CSS代码行。要使用一种方法,您可以在您的HTML和CSS中使用以下内容:

<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins&amp;display=swap');
</style>
h1{
  font-family:Poppins;
  font-size:46px
}

如果您想使用子集字体以优化加载时间,您可以使用Google字体API来指示需要支持的文本,然后在文本中包含这些字符(URL编码):

<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins&amp;display=swap&amp;text=%c4%83%c3%a2');
</style>

有关有关API的更多信息,请参阅这里这里

英文:

Not sure where you got the gstatic URLs, but those appear to be locators for cached, character-subsetted variants of the Poppins Reglar font (or, maybe actually the Poppins Bold font). If you go to the Google Fonts page for Poppins and select Regular, they'll provide you with the specific lines of HTML or CSS they recommend you use to use the font in your site. For one way of doing this, use this in your HTML and CSS:

&lt;style&gt;
@import url(&#39;https://fonts.googleapis.com/css2?family=Poppins&amp;display=swap&#39;);
&lt;/style&gt;
h1{
  font-family:Poppins;
  font-size:46px
}

If you want to use a subsetted font to optimize load times, you can use the Google Font API to indicate text that needs to be supported and then include both those characters (URL-encoded) in the text:

&lt;style&gt;
@import url(&#39;https://fonts.googleapis.com/css2?family=Poppins&amp;display=swap&amp;text=%c4%83%c3%a2&#39;);
&lt;/style&gt;

See <https://developers.google.com/fonts/docs/getting_started> or
<https://developers.google.com/fonts/docs/css2> for more info on the API.

huangapple
  • 本文由 发表于 2023年2月19日 04:23:15
  • 转载请务必保留本文链接:https://go.coder-hub.com/75496174.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定