为我的网站使用自定义字体有什么好处？答案

【问题标题】：What is better for using a custom font for my website?为我的网站使用自定义字体有什么好处？
【发布时间】：2017-11-18 09:53:28
【问题描述】：

我正在使用一种名为“DejaVu Sans”的字体，它在谷歌字体中不存在

body{
    font-family:'DejaVu Sans' , tahoma;
}

我将具有不同扩展名的字体上传到我的网站，但在我的网站上执行文本需要时间，我认为它等待整个网站首先加载。

将字体文件上传到 CDN 或文件云，然后在我的网站上使用更好，还是有更好的方法？

【问题讨论】：

您当前使用的方式，它只是从您的本地计算机加载字体 - 任何未在其系统上安装该字体的人只会看到备用字体。
另外请注意，您必须遵守字体许可证（我不知道 DejaVu Sans 是根据什么许可证分发的）——您不能只转换和/或使用您喜欢的任何字体作为webfont，否则您可能不得不面对法律后果。
@Connum ，我将字体上传到我忘记添加的网站文件中：@font-face { font-family: 'DejaVu Sans'; src: url(../fonts/DejaVuSans.eot); src: url(../fonts/DejaVuSans.ttf) format("truetype"), url(../fonts/DejaVuSans.woff) format("woff"); }

标签： html css performance fonts cdn

【解决方案1】：

你应该使用这样的字体：

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

那么你可以在任何你想要的地方使用字体

【讨论】：

【解决方案2】：

字体加载时间取决于字体文件的大小。您可以使用 font-squirrel 提供的字体套件：https://www.fontsquirrel.com/fonts/dejavu-sans

为了缩短加载时间，您可以明智地选择所需的字体格式来绑定您的网站字体。

要获取有关加载时间的更多信息，您可以参考下面的链接，这将有很大帮助。 https://www.smashingmagazine.com/2011/03/the-font-face-rule-revisited-and-useful-tricks/

【讨论】：

【解决方案3】：

请改用@font-face。

上传您的 .ttf 文件并将它们转换为字体所需的 .woff、.woof2 等。

这是标准@font-face 示例的链接： @font-face

在此处使用在线转换器：webfont converter

【讨论】：