如何使用 github 托管 webfont？

Question

如何使用 github 托管 webfont？

Hen*_*ldo 7 fonts github truetype webfonts google-webfonts

更新：我使用@brclz 建议，解决我的问题是这样的：

复制家族各个字体文件的GitHub地址，

例子：

https://github.com/h-ibaldo/Raleway_Fixed_Numerals/blob/master/font/rawline-100.woff

Run Code Online (Sandbox Code Playgroud)

github.com将 URL更改为raw.githubusercontent.com,

例子：

https://raw.githubusercontent.com/h-ibaldo/Raleway_Fixed_Numerals/blob/master/font/rawline-100.woff

Run Code Online (Sandbox Code Playgroud)

创建一个 CSS 样式表，声明该系列的所有字体粗细和样式，使用上述 URL，

例子：

@font-face {
    font-family: 'rawline';
    src: url('https://cdn.rawgit.com/h-ibaldo/Raleway_Fixed_Numerals/master/font/rawline-100.eot');
    src: url('https://cdn.rawgit.com/h-ibaldo/Raleway_Fixed_Numerals/master/font/rawline-100.eot?#iefix') format('embedded-opentype'),
         url('https://cdn.rawgit.com/h-ibaldo/Raleway_Fixed_Numerals/master/font/rawline-100.woff2') format('woff2'),
         url('https://cdn.rawgit.com/h-ibaldo/Raleway_Fixed_Numerals/master/font/rawline-100.woff') format('woff'),
         url('https://cdn.rawgit.com/h-ibaldo/Raleway_Fixed_Numerals/master/font/rawline-100.ttf') format('truetype'),
         url('https://cdn.rawgit.com/h-ibaldo/Raleway_Fixed_Numerals/master/font/rawline-100.svg') format('svg');
    font-weight: 100;
    font-style: normal;
}

Run Code Online (Sandbox Code Playgroud)

将样式表拉到字体的 GitHub 存储库中，
将字体嵌入到<head>我的 HTML 文档中，链接样式表，还将 URL 中的“github.com”更改为“raw.githubusercontent.com”，如下所示：

<link href="https://raw.githubusercontent.com/h-ibaldo/Raleway_Fixed_Numerals/master/css/rawline.css" rel="stylesheet">

然后我使用 CSS 规则来指定字体的系列、粗细和样式，

例子：

font-family: 'rawline', sans-serif; 
font-weight: 100;
font-style: italic;

Run Code Online (Sandbox Code Playgroud)

它工作得很好。

我还尝试使用@import这样的方法将它导入到另一个样式表中：

@import 'https://raw.githubusercontent.com/h-ibaldo/Raleway_Fixed_Numerals/master/css/rawline.css';

它也起作用了。

这是最终的 GitHub 项目，如果您想查看它：https :
//github.com/h-ibaldo/Raleway_Fixed_Numerals

为了一劳永逸地解决使用Raleway的内衬数字的问题，我刚刚制作了一个网络字体版本的Raleway系列，其中所有文本数字都被替换为字体的内衬数字。

我还为它准备了 CSS 样式表，它很好地解决了我的问题。知道这是其他人遇到的问题，我将通过 GitHub 提供字体文件和 CSS。

我的问题是：我怎样才能使用 GitHub 来托管 webfont，这样人们打算使用不需要托管字体文件，而是导入它，例如 Google Fonts @import 选项，例如：

@import 'https://fonts.googleapis.com/css?family=Raleway:400,700,900';

Run Code Online (Sandbox Code Playgroud)

或者像 Fontawesome 对脚本所做的那样：

<script src="https://use.fontawesome.com/28e4d6013b.js"></script>

Run Code Online (Sandbox Code Playgroud)

有什么想法吗？

Answer 1

brc*_*clz 3

使用 GitHub，您可以通过在文件 url 中使用域“raw.githubusercontent.com”（而不是 github.com）以原始格式显示源代码。

所以，https://github.com/USERNAME/REPOSITORY/blob/master/FILE变成https://raw.githubusercontent.com/USERNAME/REPOSITORY/blob/master/FILE.

但是，GitHub 将以纯文本 mime 类型提供文件，这可能会使 CSS 导入不起作用。

我能想到的唯一解决方案是使用Raw Git等第三方服务来实现真正的 CDN 行为。

归档时间：	9 年，3 月前
查看次数：	4608 次
最近记录：	9 年，3 月前