如何在Draw.io中使用Google字体？

是否可以在Draw.io中使用Google字体（https://www.google.com/fonts）？

据我所知，虽然draw.io不允许导入字体，但我想发布对我有用的东西。您必须使用具有扩展功能的浏览器，例如Chrome或Firefox（我使用的是Chrome浏览器截图）。

首先，为您的浏览器（Chrome，Firefox）获取“ Stylish”扩展名。接下来打开扩展选项，然后单击“编写新样式”按钮。

在这里，您需要：

• 输入您的样式的名称（我使用了Draw IO，但可以使用）。

• 在文本框中输入Google字体网址。我想将Google材质图标导入draw.io，因此我的示例使用： @import url('https://fonts.googleapis.com/icon?family=Material+Icons');

  注意：如果尚未将“键盘映射”（图像左下方）设置为“基本”，则可能需要将其设置为“基本”。这使复制/粘贴更加简单。

  

• 确保将“应用于字段”（在文本框中）设置为“域上的URL”，并且值为“ draw.io”。这将确保将导入应用于draw.io Web应用程序。您可以对支持自定义字体的任何Web应用程序使用相同的技术。

• 现在点击您最初设置的标题下的“保存”按钮。当您打开draw.io时，将正确导入字体。
• 打开draw.io，然后单击一个形状。
• 在格式面板（右侧的默认面板）中，单击“文本”选项卡。
• 在字体下拉菜单下，选择“自定义”，然后插入您的字体（我的名字是“ Material Icons”），然后单击“应用”。
• 现在，您都可以选择该字体。

图标字体示例：

关于图标字体的注意事项：由于在这种情况下我使用的是材质图标，因此我将图标的名称用作文本（字体连字）。例如，对于星号，我插入了一个文本框，并插入了“星号”（根据Material Icon页面的名称），并确保将字体设置为“ Material Icons”。对于带有空格的名称，请确保使用下划线（例如“ star_border”）。

文字字体示例： @import url('https://fonts.googleapis.com/css?family=Indie+Flower');

我在上面的指南中做了一些尝试，但无法使它们起作用。然后，我在draw.io的Google网上论坛页面上问了这个问题，并被告知自定义字段用于系统上本地安装的字体。

撰写了以下内容，这可能会对通过Google看到此帖子的其他人有所帮助：

• 在Google字体上查找所需的字体
• 下载字体的zip
• 请按照https://www.google.com/get/noto/help/install/了解如何在系统上安装字体
• 重新启动Chrome或您选择的浏览器（以便可以加载字体）。

单击“自定义字体”字段，然后输入您已安装的字体的名称（无需在引号或下划线中添加字体）。

查看我附加到https://groups.google.com/d/msg/drawio/mjJR6pRVTmo/T0Lrhr45AgAJ的示例

偶然遇到此问题，同时又难以将自定义字体（特别是Google字体）添加到draw.io（桌面版）。原来我使用的是12.1.7-添加自定义字体的方法不太简单。

谷歌搜索后找到以下链接-发布日期为2019年12月2日-但未提及版本。检查升级，并将draw.io升级到13.0.1，就可以了：

https://drawio-app.com/external-fonts-in-draw-io/

这是GitHub上的功能请求：https : //github.com/jgraph/drawio/issues/577

我还没有办法找到使用某些较新的Google字体的方法，但是您可以通过在字体部分下选择“自定义”，然后输入字体名称来使用一些较常见/受欢迎的字体。例如“ Avenir Next”，“ Oswald”等），然后它将使用该字体。从好的方面来说，它似乎也可以识别某些流行字体，而这些流行字体不在Google字体上，而且购买成本很高（例如Myriad Pro）。

您可以添加完整链接，因此可以输入而不是在自定义字段中键入“ Heebo” <\link href="https://fonts.googleapis.com/css?family=Heebo:500" rel="stylesheet"\>。以后更改字体时，它仍然可以解决一些小问题，但它使我更进一步。

或者..只需转到“样式”标签，然后单击“编辑”样式。添加上面的链接并更改字体系列。