如何使用Github托管Web字体?

10

更新:我使用了@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 样式表,声明了该字体族的所有字重和样式,使用如上所述的 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;
} 
  1. 将样式表拉到字体的GitHub存储库中,

  2. 将字体嵌入到我的HTML文档的<head>中,链接样式表,同时在URL中将“github.com”更改为“raw.githubusercontent.com”,如下所示:

<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字体系列的Web字体版本,其中所有文本数字都被替换为字体的线条数字,以解决使用Raleway的线条数字的问题。

我还为此准备了CSS样式表,它完美地解决了我的问题。由于其他人也存在这个问题,我会通过GitHub提供字体文件和CSS。

我的问题是:我如何使用GitHub来托管Web字体,以便使用者无需托管字体文件,而是像Google Fonts @import选项一样导入它:

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

或者像Fontawesome一样使用脚本:

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

有什么想法吗?

1个回答

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行为。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接