yuqianma/font-test-quxian-names.html

## font-test-quxian-names.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Font Test</title>
  <link rel="stylesheet" href="adobe-blank.css">
  <style>
    @font-face {
      font-family: 'zcoolwenyiti';
      src: url('站酷文艺体.ttf');
    }

    @font-face {
      font-family: 'DroidSansFallback';
      src: url('DroidSansFallback.ttf');
    }

    @font-face {
      font-family: 'unifont';
      src: url('unifont-13.0.06.ttf');
    }

    #font-loader div::before {
      font-family: 'serif';
      content: attr(style);
      margin-right: 10px;
    }

    #font-loader div::after {
      content: 'Sample文字';
      border: 1px solid;
      font-size: 30px;
    }

    canvas {
      background-color: #ccc;
    }

    /* #font-test {
      font-family: zcoolwenyiti, DroidSansFallback, unifont, AdobeBlank;
      font-size: 50px;
    } */
  </style>
</head>
<body>
  <h1>Open the Console to See Result !</h1>
  <div id="font-loader">
    Force load font files
    <div style="font-family: zcoolwenyiti;"></div>
    <div style="font-family: DroidSansFallback;"></div>
    <div style="font-family: unifont;"></div>
    <div style="font-family: AdobeBlank;"></div>
  </div>
  <!-- <div id="font-test">Hello 硚口区 𰻝 繁簡字體 1234</div> -->
  <canvas></canvas>
<script>
  const fontFamilyMap = {
    'zh-cn': 'zcoolwenyiti, DroidSansFallback, unifont',
    'zh-tw': 'DroidSansFallback, unifont',
    'zcoolwenyiti': 'zcoolwenyiti',
    'DroidSansFallback': 'DroidSansFallback'
  };

  async function main() {
    const ctx = getContext();

    const setFont = fontFamily => {
      const fontString = `50px ${fontFamily}, AdobeBlank`;
      ctx.font = fontString;
      if (ctx.font !== fontString) {
        throw `Wrong ctx.font settings: ${fontString}`;
      }
    };

    console.log('fonts loading...');
    await document.fonts.ready;
    // 'AdobeBlank' displays any character as blank.
    // So we can check fonts before it.
    if (!document.fonts.check('12px AdobeBlank')) {
      throw 'Fonts are not ready.';
    }
    console.log('fonts ready');

    const chars = await fetchChars();
    console.log(chars);

    let allPassed = true;

    Object.entries(fontFamilyMap).forEach(([locale, fontFamily]) => {

      console.log('Make sure `AdobeBlank` works before main test...');
      setFont('DroidSansFallback');
      if (ctx.measureText('硚').width !== 0) {
        throw "The width of `硚` should be 0 in this case!"
      } else {
        console.log('`AdobeBlank` works');
      }

      setFont(fontFamily);
      console.log(`fontFamily: %c${fontFamily}`, 'color: #0bd;');

      const failedChars = chars.filter(char => ctx.measureText(char).width === 0);

      if (failedChars.length) {
        console.error(`"${locale}" lacks: ${failedChars}`);
        console.error(`"${locale}" failed`);
        allPassed = false;
      } else {
        console.log(`%c"${locale}" passed`, 'color: #0b9;');
      }
    });

    if (allPassed) {
      console.log('%cAll passed!', 'color: #0b9;');
    } else {
      console.error('Some case failed!');
    }
  }

  function getContext() {
    const dpr = window.devicePixelRatio;
    const width = 800;
    const height = 100;
    const canvas = document.querySelector('canvas');
    canvas.width = width * dpr;
    canvas.height = height * dpr;
    canvas.style.cssText = `width: ${width}px; height: $${height}px;`;
    const ctx = canvas.getContext('2d');
    ctx.scale(dpr, dpr);
    ctx.textBaseline = 'bottom';
    // ctx.font = `50px zcoolwenyiti, DroidSansFallback, unifont, AdobeBlank`;
    // ctx.fillText('Hello 硚口区 \u{30ede} 繁簡字體 1234', 0, 60);
    return ctx;
  }

  async function fetchChars() {
    // from http://www.mca.gov.cn/article/sj/xzqh
    const URL = 'http://www.mca.gov.cn/article/sj/xzqh/2020/2020/202101041104.html';
    console.log(`fetching characters from ${URL}`);
    const text = await fetch(URL).then(res => res.text());
    const charSet = new Set(text.replace(/\s/g, '').split(''));

    if (charSet.has('硚')) {
      console.log('characters loaded');
    } else {
      console.error(charSet);
      throw 'Characters error.';
    }

    return Array.from(charSet);
  }

  main();
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Font Test</title>
	<link rel="stylesheet" href="adobe-blank.css">
	<style>
	@font-face {
	font-family: 'zcoolwenyiti';
	src: url('站酷文艺体.ttf');
	}

	@font-face {
	font-family: 'DroidSansFallback';
	src: url('DroidSansFallback.ttf');
	}

	@font-face {
	font-family: 'unifont';
	src: url('unifont-13.0.06.ttf');
	}

	#font-loader div::before {
	font-family: 'serif';
	content: attr(style);
	margin-right: 10px;
	}

	#font-loader div::after {
	content: 'Sample文字';
	border: 1px solid;
	font-size: 30px;
	}

	canvas {
	background-color: #ccc;
	}

	/* #font-test {
	font-family: zcoolwenyiti, DroidSansFallback, unifont, AdobeBlank;
	font-size: 50px;
	} */
	</style>
	</head>
	<body>
	<h1>Open the Console to See Result !</h1>
	<div id="font-loader">
	Force load font files
	<div style="font-family: zcoolwenyiti;"></div>
	<div style="font-family: DroidSansFallback;"></div>
	<div style="font-family: unifont;"></div>
	<div style="font-family: AdobeBlank;"></div>
	</div>
	<!-- <div id="font-test">Hello 硚口区𰻝繁簡字體 1234</div> -->
	<canvas></canvas>
	<script>
	const fontFamilyMap = {
	'zh-cn': 'zcoolwenyiti, DroidSansFallback, unifont',
	'zh-tw': 'DroidSansFallback, unifont',
	'zcoolwenyiti': 'zcoolwenyiti',
	'DroidSansFallback': 'DroidSansFallback'
	};

	async function main() {
	const ctx = getContext();

	const setFont = fontFamily => {
	const fontString = `50px ${fontFamily}, AdobeBlank`;
	ctx.font = fontString;
	if (ctx.font !== fontString) {
	throw `Wrong ctx.font settings: ${fontString}`;
	}
	};

	console.log('fonts loading...');
	await document.fonts.ready;
	// 'AdobeBlank' displays any character as blank.
	// So we can check fonts before it.
	if (!document.fonts.check('12px AdobeBlank')) {
	throw 'Fonts are not ready.';
	}
	console.log('fonts ready');

	const chars = await fetchChars();
	console.log(chars);

	let allPassed = true;

	Object.entries(fontFamilyMap).forEach(([locale, fontFamily]) => {

	console.log('Make sure `AdobeBlank` works before main test...');
	setFont('DroidSansFallback');
	if (ctx.measureText('硚').width !== 0) {
	throw "The width of `硚` should be 0 in this case!"
	} else {
	console.log('`AdobeBlank` works');
	}

	setFont(fontFamily);
	console.log(`fontFamily: %c${fontFamily}`, 'color: #0bd;');

	const failedChars = chars.filter(char => ctx.measureText(char).width === 0);

	if (failedChars.length) {
	console.error(`"${locale}" lacks: ${failedChars}`);
	console.error(`"${locale}" failed`);
	allPassed = false;
	} else {
	console.log(`%c"${locale}" passed`, 'color: #0b9;');
	}
	});

	if (allPassed) {
	console.log('%cAll passed!', 'color: #0b9;');
	} else {
	console.error('Some case failed!');
	}
	}

	function getContext() {
	const dpr = window.devicePixelRatio;
	const width = 800;
	const height = 100;
	const canvas = document.querySelector('canvas');
	canvas.width = width * dpr;
	canvas.height = height * dpr;
	canvas.style.cssText = `width: ${width}px; height: $${height}px;`;
	const ctx = canvas.getContext('2d');
	ctx.scale(dpr, dpr);
	ctx.textBaseline = 'bottom';
	// ctx.font = `50px zcoolwenyiti, DroidSansFallback, unifont, AdobeBlank`;
	// ctx.fillText('Hello 硚口区 \u{30ede} 繁簡字體 1234', 0, 60);
	return ctx;
	}

	async function fetchChars() {
	// from http://www.mca.gov.cn/article/sj/xzqh
	const URL = 'http://www.mca.gov.cn/article/sj/xzqh/2020/2020/202101041104.html';
	console.log(`fetching characters from ${URL}`);
	const text = await fetch(URL).then(res => res.text());
	const charSet = new Set(text.replace(/\s/g, '').split(''));

	if (charSet.has('硚')) {
	console.log('characters loaded');
	} else {
	console.error(charSet);
	throw 'Characters error.';
	}

	return Array.from(charSet);
	}

	main();
	</script>
	</body>
	</html>