HTML/CSS - Google Font Fira Sans 渲染

Question

我的页面设计师向我发送了他的作品，包括 Fira Sans 谷歌字体。所以我在我的笔记本电脑和办公室电脑上的渲染效果很差......但在我家里的电脑上却很好。

所有人都安装了 Windows 7。我将向您展示 google fonts 网页的屏幕。

这是在 Firefox 中的渲染效果：

This is the rendering in Firefox

无论我使用@font-face或@import还是将其添加到

<head>

标签中..结果总是相同的。所以我想知道我是否在三分之二的机器上拥有它......其他用户呢？我应该放弃这个字体吗？

其他人以前经历过类似的事情吗？

更新：这是 Joel 片段的渲染 Joel's snippet

Answer 1

您必须将其加载为链接相关。

*{font-family: 'Fira Sans', sans-serif;}
.bold{font-weight:bold;}
.italic{font-style: italic;}
.oblique{font-style: oblique;}

<link href="https://fonts.googleapis.com/css?family=Fira+Sans" rel="stylesheet">

<p><span class="bold">when you import a font </span> by CDN it will be loaded in client side on page loads, so no matters what device is loading it. Maybe you are <span class="italic">not linking it well</span> or you're working on local machine or <span class="oblique">localhost and it</span> causes some issues. On a server must work fine.</p>

编辑截图：

Answer 2

好的，我从 mozilla cdn 找到了相同的字体。

<link rel="stylesheet" href="https://code.cdn.mozilla.net/fonts/fira.css">

它在其他浏览器上也能很好地工作。我还发现 Google Fonts 团队仍在开发 Fira Font，所以在那之前我将坚持使用 mozilla 版本。

对于@font-face，您可以从github下载软件包 https://github.com/mozilla/Fira/releases/tag/4.202

HTML/CSS - Google Font Fira Sans 渲染

问题描述投票：0回答：2

2个回答

最新问题

HTML/CSS - Google Font Fira Sans 渲染

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2