Muli字体无法正确呈现

问题描述 投票：0回答：1

我在html和wkhtmltopdf中正确渲染字体时遇到问题。我在整个正文中都使用Muli字体（从Google下载：https://fonts.google.com/specimen/Muli），但是某些部分被切掉了（下面的图片中零数字没有很好地四舍五入）。我看不到Roboto或Montserrat有相同的效果。这是我的代码：

<html>
  <head>
    <style>
      body {
        font-family: 'Muli', sans-serif;
      }
      .thin {
        font-weight: 200;
      }
      .light {
        font-weight: 300;
      }
      .regular {
        font-weight: 400;
      }
      .bold {
        font-weight: 600;
      }
      .extraBold {
        font-weight: 700;
      }
      .black {
        font-weight: 800;
      }
      .extraBlack {
        font-weight: 900;
      }
   </style>
  </head>

wkhtmltopdf -L 0 -R 0 -T 0 -B 0 --page-width 2933px --page-height 5194px --disable-smart-shrinking

enter image description here

html css fonts wkhtmltopdf
1个回答
0
投票

有几件事可能会引起问题。或可能是服务器的组合。

  1. 请确保您在pt或em中没有指定字体大小，而在px中指定了字体大小。原因是kerning tables（通常内置在字体中）与字体平滑结合使用，将像素转换为打印尺寸会导致伪影。

  2. 过去，我曾经体验过下载到我计算机上的Google字体与通过javascript从服务中流式传输的内容有所不同。我认为它们不会同时更新。如果可以尝试让Google的服务器每次提供字体。还是可以尝试在其他地方找到文件？ （这听起来像是损坏的字体文件）

  3. 如果您是自托管字体，请确保服务器使用正确的MIME类型发送它们。这是它们应为的list。您可以根据所拥有的服务器环境在IIS或.htaccess文件中进行更改。 我知道这似乎很奇怪，因为它只是一种字体，但是您尝试过的另一种可能正在加载浏览器为Muli获得的其他字体类型（ttf，otf等）>>

    4. 如果以上方法均无济于事，您可以发布更多CSS信息，包括字体的加载方式以及如何设置字体显示方式（大小，平滑度，行高等）。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.