Question

是否可以在Atom主题中使用自定义字体或图像？我已将字体文件放在我主题的 styles 文件夹中并创建了CSS，但是我收到了一个路径错误：

无法加载资源：net :: ERR_FILE_NOT_FOUND file：///usr/share/atom/resources/app.asar/static/font.ttf

UI-variables.less

@font-face {
    font-family: font;
    src: url('./font.ttf');
}

Answer 1

根据this discussion和How do I load google fonts into my editor’s styles?。

有两种方法可以解决您的问题，

您可以将ttf文件放入样式文件夹，并更新atom://your-package-name/resources/your-font.woff(for instance)的路径。

或将字体文件拖放到静态文件夹中：

/Applications/Atom.app/Contents/Resources/app/static

然后你可以用这种方式使用它，然后在我的styles.less我添加了font-face：

@font-face { font-family: dejavu; src: url('dejavu/ttf/dejavusansmono.ttf'); } html, body, .editor { font-family: dejavu; }

：）

Answer 2

如果您希望在语法或UI主题中使用替代字体，Tyler的解决方案是最简单的方法。
但是，如果通过＆＃34;自定义图像＆＃34;您的意图是将自定义文件图标添加到UI主题，实现涉及更多。基本上，您需要一个图标字体，其中包含您要包含的图像并覆盖Atom使用的默认图标。您可以使用FontAwesome之类的现有字体，也可以使用IcoMoon之类的内容从SVG创建自己的自定义图标字体。
至于重写Atom的默认图标，找到必要的选择器和样式的最简单方法可能是引用现有主题的实现。请随意查看我的UI主题Atomic Design UI，其中我使用了图标字体将自定义文件图标添加到标签和树视图中。可以在以下文件中找到图标实现和格式：

styles/icon-font.less
styles/icon-variables.less
styles/icons.less

Atom语法主题

2 个答案: