Làm cách nào để sử dụng Google Font trong Draw.io?

Có thể sử dụng Google Fonts ( https://www.google.com/fonts ) trong Draw.io không?

Mặc dù draw.io không theo sự hiểu biết tốt nhất của tôi cho phép nhập phông chữ, tôi muốn đăng những gì hiệu quả với tôi. Bạn phải sử dụng một trình duyệt có khả năng mở rộng như Chrome hoặc Firefox (Tôi đang sử dụng Chrome để chụp ảnh màn hình).

Để bắt đầu nhận tiện ích mở rộng "Kiểu" cho trình duyệt của bạn ( Chrome , Firefox ). Tiếp theo mở các tùy chọn mở rộng và nhấp vào nút "Viết kiểu mới".

Từ đây bạn sẽ cần:

• Nhập tên cho phong cách của bạn (Tôi đã sử dụng Draw IO, nhưng mọi thứ đều ổn).

• Nhập url Google Font trong hộp văn bản. Tôi muốn nhập Biểu tượng Tài liệu của Google để draw.io để ví dụ của tôi sử dụng: @import url('https://fonts.googleapis.com/icon?family=Material+Icons');

  Lưu ý: Bạn có thể sẽ muốn đặt "Sơ đồ bàn phím" (phía dưới bên trái trong ảnh) thành "cơ bản" nếu chưa có. Điều này làm cho việc sao chép / dán đơn giản hơn.

  

• Đảm bảo "Áp dụng cho trường" (Trong hộp văn bản) được đặt thành "URL trên tên miền" và giá trị là "draw.io". Điều này sẽ đảm bảo việc nhập được áp dụng cho ứng dụng web draw.io. Bạn có thể sử dụng kỹ thuật tương tự cho bất kỳ ứng dụng web nào hỗ trợ phông chữ tùy chỉnh.

• Bây giờ nhấn nút "Lưu" dưới tiêu đề bạn đặt ban đầu. Khi bạn mở draw.io, phông chữ sẽ được nhập chính xác.
• Mở draw.io của bạn và bấm vào một hình dạng.
• Trong bảng định dạng của bạn (Bảng mặc định ở phía bên phải) nhấp vào tab "Văn bản".
• Trong phần thả xuống phông chữ, chọn "Tùy chỉnh" và chèn phông chữ của bạn (Của tôi là "Biểu tượng vật liệu") và nhấp vào áp dụng.
• Bây giờ bạn đã sẵn sàng để chọn phông chữ này.

Ví dụ với Phông chữ Biểu tượng:

Lưu ý về Phông chữ Biểu tượng: Vì tôi đang sử dụng Biểu tượng Vật liệu trong trường hợp này nên tôi đã sử dụng tên của biểu tượng dưới dạng văn bản (chữ ghép chữ). Ví dụ: Đối với ngôi sao tôi đã chèn một hộp văn bản và chèn "ngôi sao" (theo tên từ Trang Biểu tượng Vật liệu ) và đảm bảo phông chữ được đặt thành "Biểu tượng Vật liệu". Đối với tên có dấu cách, hãy đảm bảo sử dụng dấu gạch dưới (ví dụ: "star_border").

Ví dụ với Phông chữ: @import url('https://fonts.googleapis.com/css?family=Indie+Flower');

Tôi phần nào đã thử các hướng dẫn ở trên nhưng không thể làm cho chúng hoạt động được. Sau đó tôi đã đặt câu hỏi trên trang nhóm google của draw.io và được thông báo rằng trường tùy chỉnh dành cho phông chữ được cài đặt cục bộ trên hệ thống của bạn.

Đã viết những điều sau đây có thể giúp người khác bắt gặp bài đăng này qua google:

• Tìm phông chữ bạn muốn trên Google Fonts
• Tải xuống mã zip của phông chữ
• Theo dõi https://www.google.com/get/noto/help/install/ về cách cài đặt phông chữ trên hệ thống của bạn
• Khởi động lại Chrome hoặc trình duyệt bạn chọn (để phông chữ có thể được tải vào).

Nhấp vào trường Phông chữ tùy chỉnh và viết tên của phông chữ bạn đã cài đặt (Không cần phải đặt nó trong dấu ngoặc kép hoặc dấu gạch dưới, v.v.).

Xem ví dụ tôi đã đính kèm với https://groups.google.com/d/msg/drawio/mjJR6pRVTmo/T0Lrhr45AgAJ

Tôi chưa thể tìm ra cách sử dụng một số phông chữ mới hơn của Google, nhưng bạn có thể sử dụng một số phông chữ phổ biến / phổ biến hơn bằng cách chọn "tùy chỉnh" trong phần phông chữ và nhập tên của phông chữ ( ví dụ: "Avenir Next", "Oswald", v.v.) và sau đó nó sẽ sử dụng phông chữ đó. Về mặt sáng sủa, dường như cũng nhận ra một số phông chữ phổ biến không có trên phông chữ của Google và sẽ tốn kém khi mua (ví dụ: Myriad Pro).

Tình cờ gặp phải điều này trong khi gặp khó khăn khi thêm Phông chữ tùy chỉnh (cụ thể là Phông chữ Google) vào draw.io (phiên bản dành cho máy tính để bàn). Hóa ra tôi đang sử dụng 12.1.7 - có một cách đơn giản hơn để thêm phông chữ tùy chỉnh.

Tìm thấy liên kết sau đây sau khi tìm kiếm google - bài đăng ngày 2 tháng 12 năm 2019 - nhưng không đề cập đến phiên bản trong đó. Đã kiểm tra nâng cấp và nâng cấp draw.io lên 13.0.1, bạn đã có nó:

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

Đây là yêu cầu tính năng trên GitHub: https://github.com/jgraph/drawio/issues/577

Bạn có thể thêm liên kết đầy đủ, vì vậy thay vì chỉ nhập 'Heebo' trong trường tùy chỉnh, bạn có thể nhập <\link href="https://fonts.googleapis.com/css?family=Heebo:500" rel="stylesheet"\>. Nó vẫn hoạt động một chút lỗi khi thay đổi phông chữ sau đó, nhưng nó đã giúp tôi tiến xa hơn.

Hoặc .. chỉ cần chuyển đến tab 'style' và nhấp vào 'chỉnh sửa'. Thêm liên kết ở trên và thay đổi họ phông chữ.