html - 如何添加八 Angular 形作为类似于atom的字体

Question

如何像atom那样添加八字形作为字体？

在检查atom代码库时，我发现他们正在使用octicon图标集作为字体(font-family: 'Octicons Regular' & content: "\f0a4" )。我如何以这种方式将这套方案应用到我自己的元素中？有公开发布吗？

下图是atom src的屏幕截图，显示了样式。 (Ctrl+Shift+I)

Answer 1

Octicons Regular 没有可用的 CDN，因此您必须获取自己的 WebFontkit。然后您必须使用 @font-face 参数添加字体。

按照以下步骤将自定义字体添加到您的 HTML:-

<强>1。下载 Octicons 字体:- Octicons 常规字体可在 link. 中找到。下载 TrueType 字体文件格式 (.ttf)。

<强>2。创建 WebFont 工具包:- 将下载的 (.ttf) 文件上传到 WebFontkit Generator. 。然后下载最佳的WebFontkit。

<强>3。提取字体文件并将其上传到您的托管站点:- 编辑 stylesheet.css 文件以更新 URL。例如，如果您有类似 www.example.com 的网址。所以更新后你的 .css 文件看起来像:-

@font-face {
font-family: "Octicons";
src: url("https://example.com/css/fonts/Octicons.woff") format("woff"),
url("https://example.com/css/fonts/Octicons.woff2") format("woff2")
}

<强>4。在 CSS 声明中使用 Octicons 字体:- 当您已将 css 字体添加到您的网站时，您可以在 CSS 声明中使用它。例如，

p {
font-family: Octicons;
font-weight:normal;
font-style:normal;
}