英文:
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>ă â</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>ă â</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 ă:
<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>ă â</h1>
https://jsfiddle.net/y75on1fb/
For ă:
<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>ă â</h1>
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&display=swap');
</style>
h1{
font-family:Poppins;
font-size:46px
}
如果您想使用子集字体以优化加载时间,您可以使用Google字体API来指示需要支持的文本,然后在文本中包含这些字符(URL编码):
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap&text=%c4%83%c3%a2');
</style>
英文:
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:
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
</style>
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:
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap&text=%c4%83%c3%a2');
</style>
See <https://developers.google.com/fonts/docs/getting_started> or
<https://developers.google.com/fonts/docs/css2> for more info on the API.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论