Question

我们使用cloud typography来选择设计师选择的网络字体。响应时间造成人们开始注意到的滞后。

<link type="text/css" rel="stylesheet" href="//cloud.typography.com/XXXXXXX/YYYY/css/fonts.css" media="all" />

有没有办法，同时仍然尊重CT的授权模式，将这些字体带入本地？或者我切换到标准网络字体？

Answer 1

解释我的回答/评论......

假设你有类似的东西......

<link type="text/css" rel="stylesheet" href="localfolder/main.css" />
<link type="text/css" rel="stylesheet" href="//cloud.typography.com/XXXXXXX/YYYY/css/fonts.css" media="all" />
<link type="text/css" rel="stylesheet" href="localfolder/other.css" />
<link type="text/css" rel="stylesheet" href="localfolder/again.css" />
<link type="text/css" rel="stylesheet" href="localfolder/some.css" />
<link type="text/css" rel="stylesheet" href="localfolder/thing.css" />

您可以将其更改为更像......

<link type="text/css" rel="stylesheet" href="localfolder/css.php" />
<link type="text/css" rel="stylesheet" href="//cloud.typography.com/XXXXXXX/YYYY/css/fonts.css" media="all" />

css.php的php文件就像这样

header("Content-type: text/css");
require "localfolder/main.css";
require "localfolder/other.css";
require "localfolder/again.css";
require "localfolder/some.css";
require "localfolder/thing.css";
exit;

基本上，这会将所有本地CSS组合成一个脚本，然后您可以使用PHP缓存控件和gzip来确保在单个http /文件请求中尽快发送本地CSS ...而你的排版标签的第二个链接也将立即开始下载

第一个链接标记（css.php）完成下载/检查后...它将继续使用head标记中的任何其他标记，直到它们全部完成。

这可能对您有用，它确实非常适用于每个网站/设计..基本上大多数浏览器一次只能下载这么多文件...请参阅Max parallel http connections in a browser?了解更多信息... < / p>

---另一种可能的选择---

您可以加载没有排版链接/标签的页面..然后通过javascript动态添加它...请参阅类似How to load up CSS files using Javascript?的示例..

此处的副作用取决于网站的设计方式，您可能会看到旧的/默认字体几秒钟或某些东西..但您可以通过重新设计或某种形式隐藏此用户装载机..

否则，我能想到的唯一其他选择是尝试使用google fonts https://www.google.com/fonts找到相同的字体或类似字体，因为它们的加载速度更快..而且使用google托管的css / js /的优势lib是很多用户也已经将它们缓存，因为它们在很多其他站点中很常见。

希望这可以给你一些想法或可能帮助解决方案，但这是一个棘手的问题和一个好的问题...如果我处于相同的情况下，这就是我将如何处理它。

如何减少页面加载时外部Webfonts延迟时间？

1 个答案: