自定义字体
4 张图片

近期支持者

1 位支持者
M

自定义字体

Silex 网站建设器

Silex 网站建设器

免费
GrapesJS：0.19.x
从 GitHub 下载

包含内容

  • 免费下载使用
  • 支持个人与商业使用

支持创作者

通过一次性或每月赞助，感谢创作者发布这款免费产品。

兼容 GrapesJS

已在 GrapesJS 0.19.x 上测试

GitHub 开源

可免费使用、Fork 和贡献

编辑器兼容

专为 GrapesJS 开源编辑器设计

可免费使用

可用于个人和商业项目

Grapesjs 自定义字体插件

这段代码是一个更大项目的一部分： 关于Silex v3

关于这个插件

链接

 

该插件目前具备这些功能

  • 用于添加/移除网站字体的API（来自goole字体名称）
  • 更新DOM和“字体家族”下拉菜单
  • 把字体和网站数据一起保存
  • 加载网站数据时加载字体（加载时添加到 DOM 中）
  • 用于管理字体的UI用户界面
  • 与谷歌API的集成
  • 将 Google 字体列表存储在本地存储中以实现性能和 API 配额

限制：

目前该插件仅支持 Goolge 字体，使用 V2 API。应该升级到V3，并利用可变字体。

请参见下方“发展”部分以进行贡献

动机

我看到过一些讨论和问题，比如“我如何在 Grapesjs 编辑器中添加自定义字体？#4563"

对我来说似乎有效的方法是

  1. 更新“字体家族”下拉菜单
    const styleManager = editor.StyleManager
const fontProperty = styleManager.getProperty('typography', 'font-family')
fontProperty.setOptions(fonts)
styleManager.render()
     
  1. 更新DOM以正确显示字体：在编辑器中添加样式元素。Canvas.getDocument（）

这其实挺简单的，但以下是我实现 Google 字体时花时间的事情

  • 用 Google Fonts API 选择字体并获取它们的名称、变体和字重
  • 构建字体的URL，加载出来
  • 用于管理和安装字体的界面

评分：

暂无评价，成为第一个分享体验的人。


分享此产品：
最后更新：Aug 11, 2023
发布时间：Aug 11, 2023
版本：
0.19.x
标签：
西莱克斯字体网页设计字体

问答

暂无问题，有什么想问的？