更新:我使用了@brclz的建议,像这样解决了我的问题:
- 复制了该字体系列每个字体文件的GitHub地址,
例如:
https://github.com/h-ibaldo/Raleway_Fixed_Numerals/blob/master/font/rawline-100.woff
- 将URL中的
github.com
更改为raw.githubusercontent.com
,
示例:
https://raw.githubusercontent.com/h-ibaldo/Raleway_Fixed_Numerals/blob/master/font/rawline-100.woff
- 创建了一个 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;
}
将样式表拉到字体的GitHub存储库中,
将字体嵌入到我的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">
- 然后我使用CSS规则指定了字体的家族、重量和风格。
例如:
font-family: 'rawline', sans-serif;
font-weight: 100;
font-style: italic;
它完美地工作了。
我还尝试使用
@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>
有什么想法吗?