css加载本地字体在导出图片的预览中生效，导出后的图片则未正确加载字体

[u2003]

开发者大大好。我在css snippet新增了以下内容，希望改变字体，导出图片预览时一切字体显示正常，但导出之后的图片只有Adobe Garamond生效了，本地字体方正仿宋并没有生效，请问为什么会这样呢？我需要怎么修改css可以解决这个问题？或者说这是插件的bug？十分感谢！

@font-face {
    font-family: 'FZFangSong';
    src: local('FZFSJW--GB1-0'), local('方正仿宋简体');
  }
  
  .export-image-preview-container.markdown-preview-view,
  .export-image-root.markdown-reading-view {
      margin-top: 72px;
      margin-left: 42px;
      font-family: 'Adobe Garamond', 'FZFangSong', sans-serif !important;
      line-height: 2;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
  }

  .export-image-preview-container.markdown-preview-view div.mod-ui > p {
    margin-block-start: 32px !important;
    margin-block-end: 32px !important;

[zhouhua]

你用的是windows系统吗？adobe 的字体也是本地字体吗？

…

---- 回复的原邮件 ---- | 发件人 | ***@***.***> | | 日期 | 2025年01月03日 16:52 | | 收件人 | ***@***.***> | | 抄送至 | ***@***.***> | | 主题 | [zhouhua/obsidian-export-image] css加载本地字体在导出图片的预览中生效，导出后的图片则未正确加载字体 (Issue #79) | 开发者大大好。我在css snippet新增了以下内容，希望改变字体，导出图片预览时一切字体显示正常，但导出之后的图片只有Adobe Garamond生效了，本地字体方正仿宋并没有生效，请问为什么会这样呢？我需要怎么修改css可以解决这个问题？或者说这是插件的bug？十分感谢！ @font-face { font-family: 'FZFangSong'; src: local('FZFSJW--GB1-0'), local('方正仿宋简体'); } .export-image-preview-container.markdown-preview-view, .export-image-root.markdown-reading-view { margin-top: 72px; margin-left: 42px; font-family: 'Adobe Garamond', 'FZFangSong', sans-serif !important; line-height: 2; padding-top: 0 !important; padding-bottom: 0 !important; } .export-image-preview-container.markdown-preview-view div.mod-ui > p { margin-block-start: 32px !important; margin-block-end: 32px !important; — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[u2003]

感谢回复！我是mac系统，adobe garamond是系统字体。把自定义的字体base64编码之后插入css解决了这个问题，不过不知道有没有更方便的方法呀。

[zhouhua]

我第一次遇到这个问题，应该插件还不能支持 local(xxx) 字体的方式，如果你不自定义一个字体，source 用 local()， 而是直接用 font-family 指定本地字体的名字应该是可以的。

关于 local() 的写法的支持，我再研究一下。

[zhouhua]

对于你的 case，试试直接这样写：

.export-image-preview-container.markdown-preview-view,
.export-image-root.markdown-reading-view {
    margin-top: 72px;
    margin-left: 42px;
    font-family: 'Adobe Garamond', 'FZFSJW--GB1-0', '方正仿宋简体', sans-serif !important;
    line-height: 2;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}