我如何使用 github 托管网络字体?

How do I use github to host a webfont?

更新:我使用了@brclz 的建议,这样解决了我的问题:

  1. 复制了家族各个字体文件的GitHub地址,

示例:

https://github.com/h-ibaldo/Raleway_Fixed_Numerals/blob/master/font/rawline-100.woff
  1. 将 URL 中的 github.com 更改为 raw.githubusercontent.com,

示例:

https://raw.githubusercontent.com/h-ibaldo/Raleway_Fixed_Numerals/blob/master/font/rawline-100.woff
  1. 创建了一个 CSS 样式表,使用上面提到的 URLs,
  2. 声明了该系列的所有字体粗细和样式

示例:

@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;
} 
  1. 将样式表拉到字体的 GitHub 仓库,

  2. 将字体嵌入到我的 HTML 文档的 <head> 中,链接样式表,还在 [=] 中将 "github.com" 更改为 "raw.githubusercontent.com" 105=],像这样:

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

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

示例:

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

效果很好。

  1. 我还尝试使用 @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字体的问题,我刚刚做了一个webfont版本的Raleway家族,所有的文字数字都被字体的内衬数字所取代。

我还为它准备了CSS样式表,很漂亮的解决了我的问题。知道这是其他人遇到的问题,我将通过 GitHub.

提供字体文件和 CSS

我的问题是:我怎样才能使用 GitHub 以这样一种方式来托管 webfont,使得打算使用的人不需要托管字体文件,而是导入它,例如 Google 字体@import 选项,例如:

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

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

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

有什么想法吗?

使用 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 将使用 PLAIN TEXT mime 类型提供文件,这可能会使 CSS 导入不起作用。

我能想到的唯一解决方案是使用像 Raw Git 这样的第三方服务来获得真正的 CDN 行为。