gpt4 book ai didi

html - 修复字体差异

转载 作者:太空宇宙 更新时间:2023-11-04 06:13:15 25 4
gpt4 key购买 nike

我正在使用这种字体:https://fonts.googleapis.com/css?family=Poppins (谷歌字体)。我在 <head> 中像这样将它实现到我的 HTML 文档中标签:<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet" type="text/css" />
对于我的文本,我将它与这个小 CSS 代码一起应用:

* {
font-family: 'Poppins', sans-serif;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

在 Chrome 中一切正常。在 Chrome 版本 74.0.3729.157 中看起来像这样:
chrome_feeling
这是另一个浏览器的样式,例如 microsoft edge 版本 17.17134:microsoft_edge_feeling
如您所见,两者之间存在很大差异。为了设计漂亮的网页,我需要解决这个问题。希望有人能帮我解决这个问题。谢谢。 :)
注意:看起来它仍然可以正常工作 <p>其他浏览器中的元素也是如此。但不适用于 <h1>元素。该字体通常应用于 <h1>元素,但出于某种原因,我认为它呈现不同。如何解决这个问题?~菲利普

编辑:
为了轻松查看和测试我的问题,请在不同的浏览器(如 chrome 和 edge)中打开此 jsfiddle:https://jsfiddle.net/filipdg/q1mhcvau/4/

最佳答案

要解决此问题,请在您的 @font-face 声明中包含 WOFF 格式。大多数现代浏览器都支持 WOFF

为了获得最大的浏览器支持,包括所有可能的格式。

@font-face {
font-family: 'Poppins';
src: url('Poppins.eot');
src: url('Poppins.eot?#iefix') format('embedded-opentype'),
url('Poppins.woff2') format('woff2'),
url('Poppins.woff') format('woff'),
url('Poppins.ttf') format('truetype'),
url('Poppins.svg#svgFontName') format('svg');
}

关于html - 修复字体差异,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56219009/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com