web字体设置成平方字体_如何托管自己的Web字体

最新推荐文章于 2023-07-04 17:50:32 发布

cuml0912

最新推荐文章于 2023-07-04 17:50:32 发布

阅读量801

点赞数

文章标签：网络 java python 大数据 linux

原文链接：https://opensource.com/article/19/3/webfonts

版权

web字体设置成平方字体

字体通常是许多计算机用户的谜。例如，您是否设计了一个精美的传单，并且将文件放在某个地方进行打印时，发现Arial中呈现的所有标题是因为打印机没有您在设计中使用的精美字体？当然，有多种方法可以防止这种情况：您可以将特殊字体的单词转换为路径，将字体捆绑为PDF，将开放源代码字体与设计文件捆绑在一起，或者至少列出所需的字体。但这仍然是一个问题，因为我们是人类，我们健忘。

网络有同样的问题。如果您甚至对CSS有基本的了解，您可能已经看过这种声明：

 h1 { font-family: "Times New Roman", Times, serif; }

这是设计人员尝试定义的特定字体，如果用户没有安装Times New Roman，则提供回退，如果用户也没有Times，则提供另一回退。它比使用图形代替文本更好，但是它仍然是笨拙，笨拙的字体非管理方法，但是，在网络的早期，这是我们必须使用的全部。

网络字体

然后发生了Webfonts，将字体管理从客户端转移到服务器。网站上的字体是由服务器为客户端渲染的，而不是要求Web浏览器在用户系统上查找字体。 Google和其他提供商甚至托管公开许可的字体，设计人员可以使用简单CSS规则将其包含在他们的网站中。

这种免费便利的问题当然在于，它并非没有成本。它的使用费用为0美元，但Google等主要网站都喜欢跟踪谁引用了他们的数据（包括字体）。如果您不需要帮助Google建立每个人在网络上的活动的记录，那么好消息是您可以托管自己的Web字体，就像将字体上传到主机并使用一条简单CSS规则一样简单。附带的好处是，您的网站加载速度可能更快，因为加载每个页面后您将减少一个外部呼叫。

自托管的网络字体

您需要的第一件事是公开许可的字体。如果您不习惯于思考或关心晦涩的软件许可证，这可能会造成混淆，尤其是因为似乎所有字体都是免费的。我们中很少有人有意识地为字体买单，但大多数人的电脑上都有高价字体。由于达成了许可协议，您的计算机可能随附了法律上不允许您复制和重新分发的字体。诸如Arial，Verdana，Calibri，Georgia，Impact，Lucida和Lucida Grande，Times and Times New Roman，Trebuchet，Geneva等字体均由Microsoft，Apple和Adobe拥有。如果您购买的计算机预装了Windows或MacOS，则您已支付使用捆绑字体的权利，但您不拥有这些字体，也不允许将它们上传到Web服务器（除非另有说明）。

幸运的是，开源热潮早已席卷了字体世界，并且有来自集体和项目的优秀公开许可字体集合，这些集合和项目来自可移动类型联盟，字体库， Omnibus Type ，甚至包括Google和Adobe 。

您可以使用最常见的字体文件格式，包括TTF，OTF，WOFF，EOT等。由于Sorts Mill Goudy包含WOFF（Web开放字体格式，由Mozilla部分开发）版本，因此在本示例中将使用它。但是，其他格式的工作方式相同。

假设您要在网页上使用Sorts Mill Goudy ：

将GoudyStM-webfont.woff文件上传到您的Web服务器：
```
 scp GoudyStM-webfont.woff seth@example.com:~/www/fonts/  
```
您的主机也可以通过cPanel或类似的Web控制面板提供图形上传工具。

在您网站CSS文件中，添加一个@ font-face规则，类似于：
```
     
     
      
      
       
       @font-face { 
       
       

  font-family: "titlefont"; 
       
       

  src: url("../fonts/GoudyStM-webfont.woff"); 
       
       

} 
      
      
     
      
```
font-family值由您组成。对于任何字体代表的名称，它都是人性化的名称。我在此示例中使用“ titlefont”，因为我想此字体将用于一个虚构站点上的主要标题。您可以轻松使用“ officialfont”或“ myfont”。

src值是字体文件的路径。字体的路径必须适合您服务器的文件结构。在此示例中，我在css目录旁边有fonts目录。您可能没有按照这种方式来组织网站，因此请根据需要调整路径，请记住，一个点表示此文件夹 ，两个点表示一个文件夹 。