javascript - 在不使用 JavaScript 且不加载静态工具包的情况下加载单个 TypeKit 字体系列

标签 javascript css fonts adobe typekit

Thisthis相似但没有帮助。

目标是加载类似于 Google 字体的单个 TypeKit 字体系列,但不加载静态工具包和 JavaScript。

我们无法加载预定义的套件,因为字体是由最终用户选择的,可能不符合静态组合。

使用 Google 字体,我们可以做这样的事情:

<link href="https://fonts.googleapis.com/css?family=Comfortaa:regular" rel="stylesheet">

根据 this Adobe/TypeKit page ,可以像这样在没有 JavaScript 的情况下嵌入字体:

<link rel="stylesheet" href="https://use.typekit.net/xxxxxxx.css">

但是,这似乎只适用于套件级别(预定义的字体集合),而不适用于字体系列级别。

是否可以加载这个 this Chinese font及其所有字重,以及其他动态定义的字体 (1),无需使用 JavaScript; (2) 不加载不必要的字体系列?

最佳答案

是的,您可以使用 CSS 嵌入 Typekit 网络字体(就像 Google 字体一样)但是,您需要设置一个 TypeKit 网络元素register your domain在你能做到之前。 Typekit 字体不是免费使用的,Adobe 希望跟踪它们的使用频率。 (您也可以使用该工具对字体进行子集化)

但是,您仍然需要以某种方式注入(inject)字体以使其对浏览器可用。您可以将它包含在服务器端提供的 HTML 中(例如 PHP include)或通过 javascript 注入(inject)它。 Typekit 还应该为您提供 Javascript 的注入(inject)代码。

或者你可以引用这个Git Repo用于加载网络字体的不同方式。


编辑:一个系列中的所有字体粗细

此外,您可能不想加载特定系列中的所有权重。我不认为字体的粗细在亚洲文字中的含义与在西方语言中的含义相同(例如粗体=重要)。因此,为了节省过多的下载量,我只会指定适合您设计的重量。

也许生活在世界那个地方的人可以权衡一下?

关于javascript - 在不使用 JavaScript 且不加载静态工具包的情况下加载单个 TypeKit 字体系列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58351624/

相关文章:

javascript - 如果分配给不存在的 vue 数据属性,如何显示某种错误或警告?

javascript - html 中的 data-reveal-id 属性到底是什么?与经典 id 属性有什么区别?

html - IE 在高度 > 4096px 时显示透明度错误?

java - 小程序不显示字符串数组

java - JLabel 中的自定义字体被截断

javascript - 使用js和html5 canvas元素的径向图表

javascript - ReactJS + react 路由器 : How to reference a specific object to pass down as properties?

html - 围绕向右浮动的图像对齐文本

html - col-xs-12 显示内容的宽度为 100%。但它只适合页面宽度的 50%

javascript - 处理 HTML 中的多语言段落字体样式