Last active
April 24, 2021 17:09
-
-
Save yuqianma/d400aefb50273e6fde4a4862fec599dc to your computer and use it in GitHub Desktop.
Test Chinese county name characters in font file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment