小编Hen*_*ldo的帖子

如何使用 github 托管 webfont?

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

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

例子:

https://github.com/h-ibaldo/Raleway_Fixed_Numerals/blob/master/font/rawline-100.woff
Run Code Online (Sandbox Code Playgroud)
  1. 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)
  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;
} 
Run Code Online (Sandbox Code Playgroud)
  1. 将样式表拉到字体的 GitHub 存储库中,

  2. 将字体嵌入到<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">

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

例子:

font-family: 'rawline', sans-serif; 
font-weight: 100;
font-style: italic;
Run Code Online (Sandbox Code Playgroud)

它工作得很好。

  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 样式表,它很好地解决了我的问题。知道这是其他人遇到的问题,我将通过 …

fonts github truetype webfonts google-webfonts

7
推荐指数
1
解决办法
4608
查看次数

标签 统计

fonts ×1

github ×1

google-webfonts ×1

truetype ×1

webfonts ×1