Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

某些字体匹配会造成文字消失 #84

Open
SwingCosmic opened this issue Mar 31, 2024 · 0 comments
Open

某些字体匹配会造成文字消失 #84

SwingCosmic opened this issue Mar 31, 2024 · 0 comments

Comments

@SwingCosmic
Copy link

渲染的结果应该类似某知名视频网站的logo,但导出图片时所有的文字都消失了。

<div class="root">
  <div style="position: static; display: flex; flex-direction: row;">
    <div
      style="white-space: nowrap; font-family: -apple-system, BlinkMacSystemFont, &quot;PingFang SC&quot;, &quot;Source Han Sans CN&quot;, &quot;Hiragino Sans GB&quot;, &quot;noto sans&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-weight: 700; line-height: 1em; padding: 5px; position: relative; color: rgb(255, 255, 255); font-size: 60px;">Blue</div>
    <div style="position: static; border-radius: 7px; background-color: rgb(255, 153, 0);">
      <div
        style="white-space: nowrap; font-family: -apple-system, BlinkMacSystemFont, &quot;PingFang SC&quot;, &quot;Source Han Sans CN&quot;, &quot;Hiragino Sans GB&quot;, &quot;noto sans&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-weight: 700; line-height: 1em; padding: 5px 10px; position: static; color: rgb(0, 0, 0); font-size: 60px;">Archive</div>
    </div>
  </div>
</div>
  • 如果不设置字体,可以正常导出
  • 如果匹配到的字体为系统已安装字体,可以导出
  • 如果匹配到的字体为预先定义过的css字体,且不含任何font-weight变种,也可以导出
  • 如果匹配到了一种字体在不同font-weight下的变种不同,会导致文字直接消失

e.g.

@font-face {
  font-family: "Source Han Sans CN";
  src: url("/font/SourceHanSansCN-Medium.woff2");
  font-weight: 500;
}
@font-face {
  font-family: "Source Han Sans CN Bold";
  src: url("/font/SourceHanSansCN-Bold.woff2");
}

在这种情况下,font-weight700的字体会匹配为Source Han Sans CN Bold并造成渲染文字消失。

由于不同用户的系统环境不同,且存在用户动态加载网页字体的情况,无法得知使用到的字体传给options,这种情况下时有时无会带来令人困惑的结果

@SwingCosmic SwingCosmic changed the title 某些字体匹配会造成文字会消失 某些字体匹配会造成文字消失 Mar 31, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant