Как использовать Google Font в Draw.io?


Ответы:


7

Хотя draw.io, насколько мне известно, не позволяет импортировать шрифты, я хотел опубликовать, что работает для меня. Вы должны использовать браузер с поддержкой расширений, такой как Chrome или Firefox (я использую Chrome для скриншотов).

Для начала получите расширение «Стильный» для вашего браузера ( Chrome , Firefox ). Затем откройте параметры расширения и нажмите кнопку «Создать новый стиль».

Написать новый стиль

Отсюда вам понадобится:

  • Введите имя для своего стиля (я использовал Draw IO, но все в порядке).
  • Введите URL-адрес шрифта Google в текстовом поле. Я хотел импортировать значки материалов Google в draw.io, поэтому мой пример использует: @import url('https://fonts.googleapis.com/icon?family=Material+Icons');

    Примечание: вы, вероятно, захотите установить для своей «Keymap» (внизу слева на изображении) значение «basic», если ее еще нет. Это делает копирование / вставку проще.

    введите описание изображения здесь

  • Убедитесь, что для параметра «Применяется к полю» (в текстовом поле) установлено значение «URL-адреса домена», а для параметра «draw.io». Это обеспечит применение импорта к веб-приложению draw.io. Вы можете использовать эту же технику для любого веб-приложения, которое поддерживает пользовательские шрифты.

  • Теперь нажмите кнопку «Сохранить» под названием, которое вы изначально установили. Когда вы откроете draw.io, шрифт будет правильно импортирован.
  • Откройте свой draw.io и нажмите на форму.
  • На панели форматирования (панель «По умолчанию» справа) щелкните вкладку «Текст».
  • Под раскрывающимся шрифтом выберите «Пользовательский» и вставьте свой шрифт (Mine был «Material Icons») и нажмите «Применить».
  • Теперь вы можете выбрать этот шрифт.

Пример с Icon Font: Пример шрифта

Примечание к шрифту значков: так как в этом случае я использую значки материалов, я использовал имя значка как текст (лигатура шрифта). Например, для звезды я вставил текстовое поле, вставил «звездочку» (по названию на странице значков материалов ) и убедился, что шрифт установлен на «Значки материалов». Для имен с пробелами обязательно используйте подчеркивание (например, "star_border").

Пример с текстовым шрифтом: @import url('https://fonts.googleapis.com/css?family=Indie+Flower'); введите описание изображения здесь


Крутой хак! Я буду использовать эту тонну в будущем
Oneezy

5

Я несколько попробовал руководства выше, но не мог заставить их работать. Затем я задал вопрос на странице групп Google draw.io и был проинформирован о том, что настраиваемое поле предназначено для локально установленных шрифтов в вашей системе.

Написал следующее, что может помочь кому-то, кто сталкивался с этим постом через Google:

  • Найдите нужный шрифт в Google Fonts
  • Скачать почтовый индекс шрифта
  • Следуйте https://www.google.com/get/noto/help/install/ о том, как установить шрифт в вашей системе.
  • Перезапустите Chrome или ваш браузер (чтобы можно было загружать шрифты).

Нажмите на поле «Пользовательский шрифт» и напишите название шрифта, который вы установили (нет необходимости заключать его в кавычки или подчеркивания и т. Д.).

Смотрите пример, который я прикрепил к https://groups.google.com/d/msg/drawio/mjJR6pRVTmo/T0Lrhr45AgAJ


2

Наткнулся на это, столкнувшись с трудностью добавления пользовательского шрифта (в частности, Google Font) в draw.io (версия для ПК). Оказалось, что я использовал 12.1.7 - у которого есть менее простой способ добавить пользовательский шрифт.

Нашел следующую ссылку после поиска в Google - сообщение от 2 декабря 2019 года - но в нем нет упоминания о версии. Проверено на обновление и обновлено draw.io до 13.0.1, вот оно:

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

Это запрос функции на GitHub: https://github.com/jgraph/drawio/issues/577


Системные шрифты тоже работают без проблем. Установленные Quicksandшрифты, скачав из Google Fonts. Используется System Fontsопция для установки - напримерQuicksand-Thin
Lalitanand Dandge

1

Я не смог найти способ использовать некоторые из новых шрифтов Google, но вы можете использовать некоторые из наиболее распространенных / популярных, выбрав «custom» в разделе «шрифты» и введя имя шрифта ( например, «Avenir Next», «Oswald» и т. д.), и тогда он будет использовать этот шрифт. С другой стороны, он также распознает некоторые популярные шрифты, которых нет в Google-шрифтах и ​​которые будут дорогостоящими для покупки (например, Myriad Pro).


0

Вы можете добавить полную ссылку, поэтому вместо простого ввода «Heebo» в настраиваемое поле вы можете ввести <\link href="https://fonts.googleapis.com/css?family=Heebo:500" rel="stylesheet"\>. Это все еще работает немного глючно при смене шрифтов впоследствии, но это дало мне дальнейшее.

Или ... просто перейдите на вкладку «Стиль» и нажмите «Изменить» стиль. Добавьте ссылку выше и измените семейство шрифтов.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.