css - 如何强制我的网站使用 Google 字体而不是本地同名字体？

Question

我在网站上使用字体 Oxygen via GoogleFont .然而，出于网页设计的目的，我通过 FontSquirrel 在我的计算机上下载了 Oxygen 字体。 .

显然是一样的，但看起来不一样，而且我有尺寸问题。所以我在想:

有没有办法声明“我想使用 GoogleFont 字体而不是存储在计算机中的字体，即使它具有相同的名称”？

因为如果有人使用完全不同的同名字体，可能会出现很多显示问题。

编辑:如何在 Google 的服务器上下载字体并将其托管在我的网站上？ (该字体对于商业用途是 100% 免费的。)但如果它可以这么简单，为什么很多网站都使用 Google 字体呢？

Answer 1

如果你有网络字体，你可以自己托管并在 css 中给它们任何你想要的名字，避免本地字体加载的可能性。

例如:

@font-face {
font-family: 'myspecialfont';
src: url('oxygen-webfont.eot');
src: url('oxygen-webfont.eot?#iefix') format('embedded-opentype'),
     url('oxygen-webfont.woff2') format('woff2'),
     url('oxygen-webfont.woff') format('woff'),
     url('oxygen-webfont.ttf') format('truetype'),
     url('oxygen-webfont.svg#oxygenregular') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {font-family: "myspecialfont", sans-serif;}

只需确保您将 CSS 指向这些文件的正确路径(例如，如果您将它们放在字体文件夹中，它可能是“../fonts/oxygen-webfont”)

人们使用 google 的主要原因是他们优化了它以提供字体，它减轻了您的服务器的负载，并且可能人们从 google 缓存了字体以使其加载速度更快。如果它是一种不常见的字体并且您的服务器是不错的，那么这些可以忽略不计。