如何使用 github 托管网络字体？

问题描述 投票：0回答：2

更新：我使用了@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. 使用上面提到的 URL 创建了一个 CSS 样式表，声明该系列的所有字体粗细和样式，

示例：

@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家族的网页字体版本，将所有文字数字替换为字体的内衬数字，以一劳永逸地解决使用Raleway内衬数字的问题。

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

我的问题是：我如何使用 GitHub 来托管网络字体，以便打算使用的人不需要托管字体文件，而是导入它，例如 Google Fonts @import 选项，例如：

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

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

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

有什么想法吗？

github fonts webfonts truetype google-webfonts
2个回答
4
投票

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

0
投票

这是我的解决方案：

@font-face {    
    font-family: 'Montserrat-Arabic-Thin';
    src: url('https://raw.githubusercontent.com/typeagm/Montserrat-Arabic/blob/master/fonts/WEB/Montserrat-Arabic-Thin.woff') format('truetype');
    src: url('https://cdn.rawgit.com/typeagm/Montserrat-Arabic/master/fonts/WEB/Montserrat-Arabic-Thin.woff') format('woff');
    font-weight: 100;
}

@font-face {
    font-family: 'Montserrat-Arabic-Regular';
    src: url('https://raw.githubusercontent.com/typeagm/Montserrat-Arabic/blob/master/fonts/WEB/Montserrat-Arabic-Regular.woff') format('truetype');
    src: url('https://cdn.rawgit.com/typeagm/Montserrat-Arabic/master/fonts/WEB/Montserrat-Arabic-Regular.woff') format('woff');
    font-weight: 400;
}

@font-face {    
    font-family: 'Montserrat-Arabic-Black';
    src: url('https://raw.githubusercontent.com/typeagm/Montserrat-Arabic/blob/master/fonts/WEB/Montserrat-Arabic-Black.woff') format('truetype');
    src: url('https://cdn.rawgit.com/typeagm/Montserrat-Arabic/master/fonts/WEB/Montserrat-Arabic-Black.woff') format('woff');
    font-weight: 900;
}
<html>
    <head>   
        <link rel="stylesheet" href="/style.css">
    </head>
    <body>
        <div style="font-family: Montserrat-Arabic-Thin;">weight 100</div>
        <div style="font-family: Montserrat-Arabic-Regular;">weight 400</div>
        <div style="font-family: Montserrat-Arabic-Black;">weight 900</div>
    </body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.