调试期间不加载文件中的字体

Question

调试期间未加载文件中的字体。只有在执行结束时才会显示。这导致无法精确计算我的 div 的大小。

我写了一个fiddle只是为了展示代码，因为字体是付费的

function test(){
    var body = document.getElementsByTagName("BODY")[0];
    var div = document.createElement("div");
    div.innerHTML = "The font is not Kohinnor in debug";
    body.appendChild(div);
    console.log("end");
}

@font-face {
  font-family: KohinoorBangla;
  src: url("KohinoorBangla.ttc");
}

body{
    font-family:KohinoorBangla;
    font-size: 20px;
    color:red;
    margin: 20mm;
}

<html>
<head>
    <script src="script.js"></script>
    <link href="style.css" rel="stylesheet">
</head>
<body>
<script>test()</script>
</body>
</html>

Answer 1

我找到的解决方案是在本地安装字体，然后加载它，因为我正在创建一个 HTML 以在服务器上创建一个仅供内部使用的 PDF 文档。

<style>
@font-face {
  font-family: 'Kohinoor Bangla';
  src: local('Kohinoor Bangla');
}

body{
    font-family:'Kohinoor Bangla';
}

</style>

调试期间不加载文件中的字体

Font face from file do not load during debug

javascript

font-face