Шрифт Muli не отображается должным образом - PullRequest
Новая
       20

Шрифт Muli не отображается должным образом

0 голосов
/ 04 октября 2019

У меня проблема с правильным отображением шрифтов в 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

Ответы [ 2 ]

1 голос
/ 07 октября 2019

Вы можете использовать этот код 

<!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>
1 голос
/ 04 октября 2019

Есть несколько вещей, которые могут вызывать проблемы. Или, возможно, комбинация нескольких.

  1. Убедитесь, что вы указываете размеры шрифта в pt или em НЕ px. Причиной этого является kerning tables (обычно встроенный в шрифт) в сочетании со сглаживанием шрифта, и преобразование пикселя в размеры печати может вызвать артефакты.

  2. В прошлом я испытывалGoogle Font, загруженный на мой компьютер, физически отличался от того, что транслировалось через javascript из сервиса. Я предполагаю, что они не обновляются одновременно. Если вы можете позволить серверу Google каждый раз предоставлять шрифт. Или вы можете попробовать найти файлы в другом месте? (это похоже на поврежденный файл шрифта)

  3. Если вы самостоятельно размещаете шрифты, убедитесь, что ваш сервер отправляет их с правильным типом MIME. Вот список того, что они должны быть. Вы можете изменить это в IIS или в файле .htaccess в зависимости от имеющейся у вас среды сервера. Я знаю, это кажется странным, поскольку это только один шрифт, но другой, который вы пробовали, мог загружать другой тип шрифта (ttf, otf и т. Д.), Который браузер получает для Muli

Если ничего из этого не поможет, вы можете опубликовать больше своих CSS, включая информацию о том, как загружаются шрифты и как они отображаются (размер, сглаживание, высота строки и т. Д.)

...