HakSpring/Iansui-debugger.html at main · Aiuanyu/HakSpring · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
<head>
<title>Google Font Debug</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
  href="https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Iansui&display=swap"
  rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/fontfaceobserver@2.1.0/fontfaceobserver.js"></script>
<style>
  @import url('https://fonts.googleapis.com/css2?family=family=Iansui&display=swap');
  body {
    font-family: Iansui, sans-serif;
  }
</style>
</head>
<body>
<h1>Hello, World!</h1>
<script>
const font = new FontFaceObserver('Iansui', {
  weight: 400,
  style: 'normal',
});

font.load().then(function () {
  console.log('Font is available');
  displayDebugMessage('Google Font "Iansui" loaded successfully.');
}).catch(function () {
  console.log('Font is not available');
  displayDebugMessage('Google Font "Iansui" failed to load.');
});

function displayDebugMessage(message) {
  const debugDiv = document.getElementById('debug');
  if (debugDiv) {
    debugDiv.textContent = message;
  } else {
    const newDebugDiv = document.createElement('div');
    newDebugDiv.id = 'debug';
    newDebugDiv.textContent = message;
    document.body.appendChild(newDebugDiv);
  }
}
</script>
</body>
</html>