时间戳

首页 > 解决方案 > Muli 字体未正确渲染

html - Muli 字体未正确渲染

问题描述

我在 html 和wkhtmltopdf. 我Muli在整个正文中使用字体（从 Google 下载：https ://fonts.google.com/specimen/Muli ），但有些部分被剪掉了（下图中的零没有很好地四舍五入）。我没有看到与Robotoor相同的效果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

在此处输入图像描述

标签： htmlcssfontswkhtmltopdf

解决方案

您可以使用此代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Hello, world!</title>
    <link href="https://fonts.googleapis.com/css?family=Muli&display=swap" rel="stylesheet">
    <style type="text/css">
        @import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
        body {
            font-family: 'Muli', sans-serif;
        }
        h1 {
            font-size: 110px;
            font-weight: 900;
            color: #00b3b8;
        }
        h2 {
            font-size: 110px;
            font-weight: 700;
            color: #001fb8;
        }
        h3 {
            font-size: 110px;
            font-weight: 600;
            color: #b88800;
        }
        h4 {
            font-size: 110px;
            font-weight: 400;
            color: #b82a00;
        }
        h5 {
            font-size: 110px;
            font-weight: 300;
            color: #ad00b8;
        }
        h6 {
            font-size: 110px;
            font-weight: 200;
            color: #000000;
        }
    </style>
</head>
<body>
    <h1>100</h1>
    <h2>200</h2>
    <h3>300</h3>
    <h4>400</h4>
    <h5>500</h5>
    <h6>600</h6>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

推荐阅读