<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 css 文件 -->
<link rel="stylesheet" href="./style.css">
<!-- 引入 js 文件 -->
<script src="./index.js"></script>
</head>
<body>
<img class="icon" src="https://bi.cool/static/case-materials/icons/html.svg" />
</body>
</html>
index.html
style.css
index.js
md
README.md
现在支持上传本地图片了！
index.html
style.css
body {
background-color: #fefefe;
}
.title {
margin-top: 95px;
text-align: center;
}
.desc {
color: #777;
text-align: center;
}
.icon {
display: block;
width: 48px;
height: 48px;
margin: 30px auto;
}
编辑器加载中
index.js
/**
* 检测本地可用字体
* @returns {Promise<string[]>} 返回可用字体名称数组
*/
async function detectAvailableFonts() {
// 1. 优先尝试使用原生的 queryLocalFonts API
if (typeof window.queryLocalFonts === 'function') {
try {
const fonts = await window.queryLocalFonts();
// 去重并返回字体族名称
return [...new Set(fonts.map(font => font.family))];
} catch (error) {
console.warn('queryLocalFonts 调用失败，回退到 Canvas 检测:', error);
}
}
// 2. 降级方案：使用 Canvas 检测
return detectFontsViaCanvas();
}
/**
* 使用 Canvas 绘制对比来检测字体
*/
function detectFontsViaCanvas() {
// 需要检测的字体列表（可以根据需求扩展）
// 注意：Canvas 方法必须知道要检测哪些字体，无法像 queryLocalFonts 那样列出系统所有字体
const fontsToTest = [...new Set([
"Academy Engraved LET Plain:1.0",
"Al Bayan Plain",
"Al Bayan Bold",
"Al Nile",
"Al Nile Bold",
"Al Tarikh Regular",
"American Typewriter",
"American Typewriter Bold",
"American Typewriter Condensed",
"American Typewriter Condensed Bold",
"American Typewriter Condensed Light",
"American Typewriter Light",
"American Typewriter Semibold",
"Andale Mono",
"Apple Chancery",
"Apple Braille",
"Apple Braille Outline 6 Dot",
"Apple Braille Outline 8 Dot",
"Apple Braille Pinpoint 6 Dot",
"Apple Braille Pinpoint 8 Dot",
"Apple Color Emoji",
"AppleGothic Regular",
"AppleMyungjo Regular",
"Apple SD Gothic Neo Bold",
"Apple SD Gothic Neo ExtraBold",
"Apple SD Gothic Neo Heavy",
"Apple SD Gothic Neo Light",
"Apple SD Gothic Neo Medium",
"Apple SD Gothic Neo Regular",
"Apple SD Gothic Neo SemiBold",
"Apple SD Gothic Neo Thin",
"Apple SD Gothic Neo UltraLight",
"Apple Symbols",
"Arial Black",
"Arial Bold Italic",
"Arial Bold",
"Arial Italic",
"Arial Hebrew",
"Arial Hebrew Bold",
"Arial Hebrew Light",
"Arial Hebrew Scholar",
"Arial Hebrew Scholar Bold",
"Arial Hebrew Scholar Light",
"Arial",
"Arial Narrow",
"Arial Narrow Bold",
"Arial Narrow Bold Italic",
"Arial Narrow Italic",
"Arial Rounded MT Bold",
"Arial Unicode MS",
"Avenir Black",
"Avenir Black Oblique",
"Avenir Book",
"Avenir Book Oblique",
"Avenir Heavy",
"Avenir Heavy Oblique",
"Avenir Light",
"Avenir Light Oblique",
"Avenir Medium",
"Avenir Medium Oblique",
"Avenir Oblique",
"Avenir Roman",
"Avenir Next Bold",
"Avenir Next Bold Italic",
"Avenir Next Demi Bold",
"Avenir Next Demi Bold Italic",
"Avenir Next Heavy",
"Avenir Next Heavy Italic",
"Avenir Next Italic",
"Avenir Next Medium",
"Avenir Next Medium Italic",
"Avenir Next Regular",
"Avenir Next Ultra Light",
"Avenir Next Ultra Light Italic",
"Avenir Next Condensed Bold",
"Avenir Next Condensed Bold Italic",
"Avenir Next Condensed Demi Bold",
"Avenir Next Condensed Demi Bold Italic",
"Avenir Next Condensed Heavy",
"Avenir Next Condensed Heavy Italic",
"Avenir Next Condensed Italic",
"Avenir Next Condensed Medium",
"Avenir Next Condensed Medium Italic",
"Avenir Next Condensed Regular",
"Avenir Next Condensed Ultra Light",
"Avenir Next Condensed Ultra Light Italic",
"Ayuthaya",
"BIZ UDGothic Bold",
"BIZ UDGothic",
"BIZ UDMincho",
"BM DoHyeon OTF",
"BM HANNA 11yrs old OTF",
"BM HANNA Air OTF",
"BM HANNA Pro OTF",
"BM JUA OTF",
"BM KIRANGHAERANG OTF",
"BM YEONSUNG OTF",
"Baghdad Regular",
"Bangla MN",
"Bangla MN Bold",
"Bangla Sangam MN",
"Bangla Sangam MN Bold",
"Baskerville",
"Baskerville Bold",
"Baskerville Bold Italic",
"Baskerville Italic",
"Baskerville SemiBold",
"Baskerville SemiBold Italic",
"Beirut Regular",
"BiauKaiHK Regular",
"BiauKaiTC Regular",
"Big Caslon Medium",
"Bodoni Ornaments",
"Bodoni 72 Bold",
"Bodoni 72 Book",
"Bodoni 72 Book Italic",
"Bodoni 72 Oldstyle Bold",
"Bodoni 72 Oldstyle Book",
"Bodoni 72 Oldstyle Book Italic",
"Bodoni 72 Smallcaps Book",
"Bradley Hand Bold",
"Brush Script MT Italic",
"Chalkboard",
"Chalkboard Bold",
"Chalkboard SE Bold",
"Chalkboard SE Light",
"Chalkboard SE Regular",
"Chalkduster",
"Charter Black",
"Charter Black Italic",
"Charter Bold",
"Charter Bold Italic",
"Charter Italic",
"Charter Roman",
"Cochin",
"Cochin Bold",
"Cochin Bold Italic",
"Cochin Italic",
"Comic Sans MS",
"Comic Sans MS Bold",
"Copperplate",
"Copperplate Bold",
"Copperplate Light",
"Corsiva Hebrew",
"Corsiva Hebrew Bold",
"Courier New Bold Italic",
"Courier New Bold",
"Courier New Italic",
"Courier New",
"Wawati SC Regular",
"Wawati TC Regular",
"DIN Alternate Bold",
"DIN Condensed Bold",
"Damascus Regular",
"Damascus Bold",
"Damascus Light",
"Damascus Medium",
"Damascus Semi Bold",
"DecoType Naskh Regular",
"Devanagari MT",
"Devanagari MT Bold",
"Devanagari Sangam MN",
"Devanagari Sangam MN Bold",
"Didot",
"Didot Bold",
"Didot Italic",
"Diwan Kufi Regular",
"Mishafi Regular",
"Mishafi Gold Regular",
"Diwan Thuluth Regular",
"Euphemia UCAS",
"Euphemia UCAS Bold",
"Euphemia UCAS Italic",
"Lantinghei TC Heavy",
"Lantinghei SC Heavy",
"Lantinghei TC Extralight",
"Lantinghei SC Extralight",
"Lantinghei TC Demibold",
"Lantinghei SC Demibold",
"Farah Regular",
"Farisi Regular",
"Futura Bold",
"Futura Condensed ExtraBold",
"Futura Condensed Medium",
"Futura Medium",
"Futura Medium Italic",
"GB18030 Bitmap",
"Galvji",
"Galvji Bold",
"Galvji Bold Oblique",
"Galvji Oblique",
"Geeza Pro Regular",
"Geeza Pro Bold",
"Geneva",
"Georgia",
"Georgia Bold",
"Georgia Bold Italic",
"Georgia Italic",
"Gill Sans",
"Gill Sans Bold",
"Gill Sans Bold Italic",
"Gill Sans Italic",
"Gill Sans Light",
"Gill Sans Light Italic",
"Gill Sans SemiBold",
"Gill Sans SemiBold Italic",
"Gill Sans UltraBold",
"Grantha Sangam MN Bold",
"Grantha Sangam MN Regular",
"Gujarati MT",
"Gujarati MT Bold",
"Gujarati Sangam MN",
"Gujarati Sangam MN Bold",
"Gurmukhi MN",
"Gurmukhi MN Bold",
"Gurmukhi Sangam MN",
"Gurmukhi Sangam MN Bold",
"Hannotate SC Regular",
"Hannotate SC Bold",
"Hannotate TC Regular",
"Hannotate TC Bold",
"HanziPen SC Regular",
"HanziPen SC Bold",
"HanziPen TC Regular",
"HanziPen TC Bold",
"Helvetica",
"Helvetica Bold",
"Helvetica Bold Oblique",
"Helvetica Light",
"Helvetica Light Oblique",
"Helvetica Oblique",
"Helvetica Neue",
"Helvetica Neue Bold",
"Helvetica Neue Bold Italic",
"Helvetica Neue Condensed Black",
"Helvetica Neue Condensed Bold",
"Helvetica Neue Italic",
"Helvetica Neue Light",
"Helvetica Neue Light Italic",
"Helvetica Neue Medium",
"Helvetica Neue Medium Italic",
"Helvetica Neue Thin",
"Helvetica Neue Thin Italic",
"Helvetica Neue UltraLight",
"Helvetica Neue UltraLight Italic",
"Herculanum",
"Hiragino Maru Gothic ProN W4",
"Hiragino Mincho ProN W3",
"Hiragino Mincho ProN W6",
"Hiragino Sans W0",
"Hiragino Sans W1",
"Hiragino Sans W2",
"Hiragino Sans W3",
"Hiragino Sans W4",
"Hiragino Sans W5",
"Hiragino Sans W6",
"Hiragino Sans W7",
"Hiragino Sans W8",
"Hiragino Sans W9",
"Hiragino Sans CNS W3",
"Hiragino Sans CNS W6",
"Hiragino Sans GB W3",
"Hiragino Sans GB W6",
"Hoefler Text Black",
"Hoefler Text Black Italic",
"Hoefler Text Italic",
"Hoefler Text Ornaments",
"Hoefler Text",
"ITF Devanagari Bold",
"ITF Devanagari Book",
"ITF Devanagari Demi",
"ITF Devanagari Light",
"ITF Devanagari Medium",
"ITF Devanagari Marathi Bold",
"ITF Devanagari Marathi Book",
"ITF Devanagari Marathi Demi",
"ITF Devanagari Marathi Light",
"ITF Devanagari Marathi Medium",
"Impact",
"InaiMathi",
"InaiMathi Bold",
"HeadLineA Regular",
"PilGi Regular",
"GungSeo Regular",
"PCMyungjo Regular",
"Kailasa Regular",
"Kailasa Bold",
"Kannada MN",
"Kannada MN Bold",
"Kannada Sangam MN",
"Kannada Sangam MN Bold",
"Kefa Bold",
"Kefa Regular",
"Khmer MN",
"Khmer MN Bold",
"Khmer Sangam MN",
"Klee Demibold",
"Klee Medium",
"Kohinoor Bangla Bold",
"Kohinoor Bangla Light",
"Kohinoor Bangla Medium",
"Kohinoor Bangla",
"Kohinoor Bangla Semibold",
"Kohinoor Devanagari Bold",
"Kohinoor Devanagari Light",
"Kohinoor Devanagari Medium",
"Kohinoor Devanagari Regular",
"Kohinoor Devanagari Semibold",
"Kohinoor Gujarati Bold",
"Kohinoor Gujarati Light",
"Kohinoor Gujarati Medium",
"Kohinoor Gujarati Regular",
"Kohinoor Gujarati Semibold",
"Kohinoor Telugu Bold",
"Kohinoor Telugu Light",
"Kohinoor Telugu Medium",
"Kohinoor Telugu",
"Kohinoor Telugu Semibold",
"Kokonor Regular",
"Krungthep",
"KufiStandardGK Regular",
"Lao MN",
"Lao MN Bold",
"Lao Sangam MN",
"Apple LiGothic Medium",
"LiHei Pro",
"LiSong Pro",
"Apple LiSung Light",
"Lucida Grande",
"Lucida Grande Bold",
"Luminari",
"LingWai SC Medium",
"LingWai TC Medium",
"Malayalam MN",
"Malayalam MN Bold",
"Malayalam Sangam MN",
"Malayalam Sangam MN Bold",
"Marker Felt Thin",
"Marker Felt Wide",
"Menlo Bold",
"Menlo Bold Italic",
"Menlo Italic",
"Menlo Regular",
"Microsoft Sans Serif",
"Monaco",
"Gurmukhi MT",
"Mshtakan",
"Mshtakan Bold",
"Mshtakan BoldOblique",
"Mshtakan Oblique",
"MuktaMahee Bold",
"MuktaMahee ExtraBold",
"MuktaMahee ExtraLight",
"MuktaMahee Light",
"MuktaMahee Medium",
"MuktaMahee Regular",
"MuktaMahee SemiBold",
"Muna Regular",
"Muna Black",
"Muna Bold",
"Myanmar MN",
"Myanmar MN Bold",
"Myanmar Sangam MN",
"Myanmar Sangam MN Bold",
"Nadeem Regular",
"Nanum Brush Script",
"NanumGothic",
"NanumGothic Bold",
"NanumGothic ExtraBold",
"NanumMyeongjo",
"NanumMyeongjo Bold",
"NanumMyeongjo ExtraBold",
"Nanum Pen Script",
"New Peninim MT",
"New Peninim MT Bold",
"New Peninim MT Bold Inclined",
"New Peninim MT Inclined",
"Noteworthy Bold",
"Noteworthy Light",
"Noto Nastaliq Urdu",
"Noto Nastaliq Urdu Bold",
"Noto Sans Batak Regular",
"Noto Sans Kannada Black",
"Noto Sans Kannada Bold",
"Noto Sans Kannada ExtraBold",
"Noto Sans Kannada ExtraLight",
"Noto Sans Kannada Light",
"Noto Sans Kannada Medium",
"Noto Sans Kannada Regular",
"Noto Sans Kannada SemiBold",
"Noto Sans Kannada Thin",
"Noto Sans Myanmar Black",
"Noto Sans Myanmar Bold",
"Noto Sans Myanmar ExtraBold",
"Noto Sans Myanmar ExtraLight",
"Noto Sans Myanmar Light",
"Noto Sans Myanmar Medium",
"Noto Sans Myanmar Regular",
"Noto Sans Myanmar SemiBold",
"Noto Sans Myanmar Thin",
"Noto Sans NKo Regular",
"Noto Sans Oriya",
"Noto Sans Oriya Bold",
"Noto Sans Syriac Regular Regular",
"Noto Sans Syriac Regular Black",
"Noto Sans Syriac Regular Bold",
"Noto Sans Syriac Regular ExtraBold",
"Noto Sans Syriac Regular ExtraLight",
"Noto Sans Syriac Regular Light",
"Noto Sans Syriac Regular Medium",
"Noto Sans Syriac Regular SemiBold",
"Noto Sans Syriac Regular Thin",
"Noto Sans Tagalog Regular",
"Noto Serif Myanmar Black",
"Noto Serif Myanmar Bold",
"Noto Serif Myanmar ExtraBold",
"Noto Serif Myanmar ExtraLight",
"Noto Serif Myanmar Light",
"Noto Serif Myanmar Medium",
"Noto Serif Myanmar Regular",
"Noto Serif Myanmar SemiBold",
"Noto Serif Myanmar Thin",
"Optima Bold",
"Optima Bold Italic",
"Optima ExtraBlack",
"Optima Italic",
"Optima Regular",
"Oriya MN",
"Oriya MN Bold",
"Oriya Sangam MN",
"Oriya Sangam MN Bold",
"Osaka",
"Osaka-Mono",
"PSL Ornanong Pro Bold",
"PSL Ornanong Pro Bold Italic",
"PSL Ornanong Pro Demibold",
"PSL Ornanong Pro Demibold Italic",
"PSL Ornanong Pro Italic",
"PSL Ornanong Pro Light",
"PSL Ornanong Pro Light Italic",
"PSL Ornanong Pro",
"PT Mono Bold",
"PT Mono",
"PT Sans Bold",
"PT Sans Bold Italic",
"PT Sans Caption",
"PT Sans Caption Bold",
"PT Sans Italic",
"PT Sans Narrow",
"PT Sans Narrow Bold",
"PT Sans",
"PT Serif Bold",
"PT Serif Bold Italic",
"PT Serif Caption",
"PT Serif Caption Italic",
"PT Serif Italic",
"PT Serif",
"Palatino Bold",
"Palatino Bold Italic",
"Palatino Italic",
"Palatino",
"Papyrus",
"Papyrus Condensed",
"Party LET Plain",
"Phosphate Inline",
"Phosphate Solid",
"PingFang HK Light",
"PingFang HK Medium",
"PingFang HK Regular",
"PingFang HK Semibold",
"PingFang HK Thin",
"PingFang HK Ultralight",
"PingFang MO Light",
"PingFang MO Medium",
"PingFang MO Regular",
"PingFang MO Semibold",
"PingFang MO Thin",
"PingFang MO Ultralight",
"PingFang SC Light",
"PingFang SC Medium",
"PingFang SC Regular",
"PingFang SC Semibold",
"PingFang SC Thin",
"PingFang SC Ultralight",
"PingFang TC Light",
"PingFang TC Medium",
"PingFang TC Regular",
"PingFang TC Semibold",
"PingFang TC Thin",
"PingFang TC Ultralight",
"Plantagenet Cherokee",
"Raanana",
"Raanana Bold",
"Rockwell Bold",
"Rockwell Bold Italic",
"Rockwell Italic",
"Rockwell",
"Hei Regular",
"Kai Regular",
"Baoli SC Regular",
"Baoli TC Regular",
"STFangsong",
"STHeiti",
"Heiti SC Light",
"Heiti SC Medium",
"Heiti TC Light",
"Heiti TC Medium",
"STIX Two Math Regular",
"STIX Two Text Regular",
"STIX Two Text Italic Italic",
"STIX Two Text Italic Bold Italic",
"STIX Two Text Italic Medium Italic",
"STIX Two Text Italic SemiBold Italic",
"STIX Two Text Bold",
"STIX Two Text Medium",
"STIX Two Text SemiBold",
"STKaiti",
"Kaiti SC Black",
"Kaiti SC Bold",
"Kaiti SC Regular",
"Kaiti TC Black",
"Kaiti TC Bold",
"Kaiti TC Regular",
"Libian SC Regular",
"Libian TC Regular",
"STSong",
"Songti SC Black",
"Songti SC Bold",
"Songti SC Light",
"Songti SC Regular",
"Songti TC Bold",
"Songti TC Light",
"Songti TC Regular",
"STXihei",
"Xingkai SC Bold",
"Xingkai SC Light",
"Xingkai TC Bold",
"Xingkai TC Light",
"Yuanti SC Bold",
"Yuanti SC Light",
"Yuanti SC Regular",
"Yuanti TC Bold",
"Yuanti TC Light",
"Yuanti TC Regular",
"Sana Regular",
"Sathu",
"Savoye LET Plain:1.0",
"Shree Devanagari 714",
"Shree Devanagari 714 Bold",
"Shree Devanagari 714 Bold Italic",
"Shree Devanagari 714 Italic",
"SignPainter-HouseScript",
"SignPainter-HouseScript Semibold",
"Silom",
"SimSong Bold",
"SimSong Regular",
"Sinhala MN",
"Sinhala MN Bold",
"Sinhala Sangam MN",
"Sinhala Sangam MN Bold",
"Skia Regular",
"Skia Black",
"Skia Black Condensed",
"Skia Black Extended",
"Skia Bold",
"Skia Condensed",
"Skia Extended",
"Skia Light",
"Skia Light Condensed",
"Skia Light Extended",
"Snell Roundhand",
"Snell Roundhand Black",
"Snell Roundhand Bold",
"Sukhumvit Set Bold",
"Sukhumvit Set Light",
"Sukhumvit Set Medium",
"Sukhumvit Set Semi Bold",
"Sukhumvit Set Text",
"Sukhumvit Set Thin",
"Symbol",
"Tahoma",
"Tahoma Bold",
"Tamil MN",
"Tamil MN Bold",
"Tamil Sangam MN",
"Tamil Sangam MN Bold",
"Telugu MN",
"Telugu MN Bold",
"Telugu Sangam MN",
"Telugu Sangam MN Bold",
"Thonburi",
"Thonburi Bold",
"Thonburi Light",
"Times New Roman Bold Italic",
"Times New Roman Bold",
"Times New Roman Italic",
"Times New Roman",
"Toppan Bunkyu Gothic Demibold",
"Toppan Bunkyu Gothic Regular",
"Toppan Bunkyu Midashi Gothic Extrabold",
"Toppan Bunkyu Midashi Mincho Extrabold",
"Toppan Bunkyu Mincho Regular",
"Trattatello",
"Trebuchet MS Bold Italic",
"Trebuchet MS",
"Trebuchet MS Bold",
"Trebuchet MS Italic",
"Tsukushi A Round Gothic Bold",
"Tsukushi A Round Gothic Regular",
"Tsukushi B Round Gothic Bold",
"Tsukushi B Round Gothic Regular",
"Verdana",
"Verdana Bold",
"Verdana Bold Italic",
"Verdana Italic",
"Waseem Regular",
"Waseem Light",
"Webdings",
"Weibei SC Bold",
"Weibei TC Bold",
"Wingdings",
"Wingdings 2",
"Wingdings 3",
"YuGothic Bold",
"YuGothic Medium",
"YuKyokasho Bold",
"YuKyokasho Medium",
"YuKyokasho Yoko Bold",
"YuKyokasho Yoko Medium",
"YuMincho Demibold",
"YuMincho Extrabold",
"YuMincho Medium",
"YuMincho +36p Kana Demibold",
"YuMincho +36p Kana Extrabold",
"YuMincho +36p Kana Medium",
"Yuppy SC Regular",
"Yuppy TC Regular",
"Zapf Dingbats",
"Zapfino",
// 下面是 windows 的
...[
"AIGDT",
"AMGDT",
"AMGDT_IV25",
"AMGDT_IV50",
"AcadEref",
"AmdtSymbols",
"Arial Black Normal",
"Arial Negreta cursiva",
"Arial Negreta",
"Arial Cursiva",
"Arial",
"Arial Unicode MS",
"ArtifaktElement-Black",
"Artifakt Element Black Italic",
"Artifakt Element Bold",
"Artifakt Element Bold Italic",
"ArtifaktElement-Book",
"Artifakt Element Book Italic",
"ArtifaktElement-Hair",
"Artifakt Element Hair Italic",
"ArtifaktElement-Heavy",
"Artifakt Element Heavy Italic",
"Artifakt Element Italic",
"ArtifaktElement-Light",
"Artifakt Element Light Italic",
"ArtifaktElement-Medium",
"Artifakt Element Medium Italic",
"ArtifaktElement-Regular",
"ArtifaktElement-Thin",
"Artifakt Element Thin Italic",
"AxureHandwriting",
"AxureHandwriting-Bold",
"AxureHandwriting-BoldItalic",
"AxureHandwriting-Italic",
"Bahnschrift",
"Bahnschrift Bold",
"Bahnschrift Bold Condensed",
"Bahnschrift Bold SemiCondensed",
"Bahnschrift Condensed",
"Bahnschrift Light",
"Bahnschrift Light Condensed",
"Bahnschrift Light SemiCondensed",
"Bahnschrift SemiBold",
"Bahnschrift SemiBold Condensed",
"Bahnschrift SemiBold SemiCondensed",
"Bahnschrift SemiCondensed",
"Bahnschrift SemiLight",
"Bahnschrift SemiLight Condensed",
"Bahnschrift SemiLight SemiCondensed",
"Bank Gothic Light BT",
"Bank Gothic Medium BT",
"Book Antiqua",
"Book Antiqua Negreta",
"Book Antiqua Negreta cursiva",
"Book Antiqua Cursiva",
"Calibri",
"Calibri Bold",
"Calibri Bold Italic",
"Calibri Italic",
"Calibri Light",
"Calibri Light Italic",
"Cambria",
"Cambria Bold",
"Cambria Bold Italic",
"Cambria Italic",
"Cambria Math",
"Candara",
"Candara Bold",
"Candara Bold Italic",
"Candara Italic",
"Candara Light",
"Candara Light Italic",
"Cascadia Code",
"Cascadia Code Bold",
"Cascadia Code ExtraLight",
"Cascadia Code Light",
"Cascadia Code SemiBold",
"Cascadia Code SemiLight",
"Cascadia Mono",
"Cascadia Mono Bold",
"Cascadia Mono ExtraLight",
"Cascadia Mono Light",
"Cascadia Mono SemiBold",
"Cascadia Mono SemiLight",
"Century",
"Century Gothic",
"Century Gothic Negreta",
"Century Gothic Negreta cursiva",
"Century Gothic Cursiva",
"CityBlueprint",
"Comic Sans MS",
"Comic Sans MS Negreta",
"Comic Sans MS Negreta cursiva",
"Comic Sans MS Cursiva",
"Commercial Pi BT",
"Commercial Script BT",
"Complex",
"Complex_IV25",
"Complex_IV50",
"Consolas",
"Consolas Bold",
"Consolas Bold Italic",
"Consolas Italic",
"Constantia",
"Constantia Bold",
"Constantia Bold Italic",
"Constantia Italic",
"Corbel",
"Corbel Bold",
"Corbel Bold Italic",
"Corbel Italic",
"Corbel Light",
"Corbel Light Italic",
"CountryBlueprint",
"Courier New Negreta cursiva",
"Courier New Negreta",
"Courier New Cursiva",
"Courier New",
"等线",
"等线 Bold",
"等线 Light",
"Dutch 801 Bold BT",
"Dutch 801 Bold Italic BT",
"Dutch 801 Extra Bold BT",
"Dutch 801 Italic BT",
"Dutch 801 Roman BT",
"Ebrima",
"Ebrima Negreta",
"EuroRoman",
"EuroRoman Oblique",
"方正舒体",
"方正姚体",
"仿宋",
"Franklin Gothic Medium",
"Franklin Gothic Medium Cursiva",
"GDT",
"GDT_IV25",
"GDT_IV50",
"GENISO",
"GOST Common",
"GOST Common Italic",
"Gabriola",
"Gadugi",
"Gadugi Negreta",
"Georgia",
"Georgia Negreta",
"Georgia Negreta cursiva",
"Georgia Cursiva",
"GothicE",
"GothicG",
"GothicI",
"GreekC",
"GreekC_IV25",
"GreekC_IV50",
"GreekS",
"GreekS_IV25",
"GreekS_IV50",
"HoloLens MDL2 Assets",
"ISOCP",
"ISOCP2",
"ISOCP2_IV25",
"ISOCP2_IV50",
"ISOCP3",
"ISOCP3_IV25",
"ISOCP3_IV50",
"ISOCPEUR",
"ISOCPEUR Italic",
"ISOCP_IV25",
"ISOCP_IV50",
"ISOCT",
"ISOCT2",
"ISOCT2_IV25",
"ISOCT2_IV50",
"ISOCT3",
"ISOCT3_IV25",
"ISOCT3_IV50",
"ISOCTEUR",
"ISOCTEUR Italic",
"ISOCT_IV25",
"ISOCT_IV50",
"Impact",
"Ink Free",
"Italic",
"ItalicC",
"ItalicT",
"Italic_IV25",
"Italic_IV50",
"Javanese Text",
"楷体",
"Leelawadee UI",
"Leelawadee UI Negreta",
"Leelawadee UI Semilight Normal",
"隶书",
"Lucida Console",
"Lucida Sans Unicode",
"MS Gothic",
"MS PGothic",
"MS UI Gothic",
"MT Extra",
"MV Boli",
"Malgun Gothic",
"Malgun Gothic Semilight",
"Malgun Gothic Bold",
"Marlett",
"Microsoft Himalaya",
"Microsoft Yi Baiti",
"Microsoft JhengHei Negreta",
"Microsoft JhengHei Light",
"Microsoft JhengHei",
"Microsoft JhengHei UI Negreta",
"Microsoft JhengHei UI Light",
"Microsoft JhengHei UI",
"Microsoft New Tai Lue",
"Microsoft New Tai Lue Bold",
"Microsoft PhagsPa",
"Microsoft PhagsPa Bold",
"Microsoft Sans Serif",
"Microsoft Tai Le",
"Microsoft Tai Le Bold",
"微软雅黑",
"微软雅黑 Bold",
"微软雅黑 Light",
"Microsoft Yahei UI",
"Microsoft Yahei UI Bold",
"Microsoft YaHei UI Light",
"MingLiU_HKSCS-ExtB",
"MingLiU-ExtB",
"Mongolian Baiti",
"Monospace 821 Bold BT",
"Monospace 821 Bold Italic BT",
"Monospace 821 Italic BT",
"Monospace 821 BT",
"Monotxt",
"Monotxt_IV25",
"Monotxt_IV50",
"Myanmar Text",
"Myanmar Text Negreta",
"新宋体",
"Nirmala UI",
"Nirmala UI Negreta",
"Nirmala UI Semilight",
"Noto Sans SC",
"Noto Sans SC Black",
"Noto Sans SC Bold",
"Noto Sans SC DemiLight",
"Noto Sans SC Light",
"Noto Sans SC Medium",
"Noto Sans SC Thin",
"Noto Serif SC",
"Noto Serif SC Black",
"Noto Serif SC Bold",
"Noto Serif SC ExtraLight",
"Noto Serif SC Light",
"Noto Serif SC Medium",
"Noto Serif SC SemiBold",
"Noto Sans SC Bold",
"Noto Sans SC Medium",
"Noto Sans SC",
"PMingLiU-ExtB",
"Palatino Linotype Negreta",
"Palatino Linotype Negreta cursiva",
"Palatino Linotype Cursiva",
"Palatino Linotype",
"PanRoman",
"Proxy 1",
"Proxy 2",
"Proxy 3",
"Proxy 4",
"Proxy 5",
"Proxy 6",
"Proxy 7",
"Proxy 8",
"Proxy 9",
"RomanC",
"RomanD",
"RomanS",
"RomanS_IV25",
"RomanS_IV50",
"RomanT",
"Romantic",
"Romantic Bold",
"Romantic Italic",
"SJQY",
"华文彩云",
"华文仿宋",
"华文琥珀",
"华文楷体",
"华文隶书",
"华文宋体",
"华文细黑",
"华文行楷",
"华文新魏",
"华文中宋",
"SansSerif",
"SansSerif Bold",
"SansSerif BoldOblique",
"Sans Serif Collection",
"SansSerif Oblique",
"ScriptC",
"ScriptS",
"ScriptS_IV25",
"ScriptS_IV50",
"Segoe UI Variable Display",
"Segoe UI Variable Display Bold",
"Segoe UI Variable Display Light",
"Segoe UI Variable Display Semibold",
"Segoe UI Variable Display Semilight",
"Segoe UI Variable Small",
"Segoe UI Variable Small Bold",
"Segoe UI Variable Small Light",
"Segoe UI Variable Small Semibold",
"Segoe UI Variable Small Semilight",
"Segoe UI Variable Text",
"Segoe UI Variable Text Bold",
"Segoe UI Variable Text Light",
"Segoe UI Variable Text Semibold",
"Segoe UI Variable Text Semilight",
"Segoe Fluent Icons",
"Segoe MDL2 Assets",
"Segoe Print",
"Segoe Print Bold",
"Segoe Script",
"Segoe Script Negreta",
"Segoe UI",
"Segoe UI Negreta",
"Segoe UI Negreta Cursiva",
"Segoe UI Cursiva",
"Segoe UI Light",
"Segoe UI Light Italic",
"Segoe UI Semibold",
"Segoe UI Semibold Italic",
"Segoe UI Semilight",
"Segoe UI Semilight Italic",
"Segoe UI Black",
"Segoe UI Black Italic",
"Segoe UI Emoji",
"Segoe UI Historic",
"Segoe UI Symbol",
"黑体",
"宋体",
"SimSun-ExtB",
"SimSun-ExtG",
"Simplex",
"Simplex_IV25",
"Simplex_IV50",
"Sitka Banner",
"Sitka Banner Bold",
"Sitka Banner Bold Italic",
"Sitka Banner Italic",
"Sitka Banner Semibold",
"Sitka Banner Semibold Italic",
"Sitka Display",
"Sitka Display Bold",
"Sitka Display Bold Italic",
"Sitka Display Italic",
"Sitka Display Semibold",
"Sitka Display Semibold Italic",
"Sitka Heading",
"Sitka Heading Bold",
"Sitka Heading Bold Italic",
"Sitka Heading Italic",
"Sitka Heading Semibold",
"Sitka Heading Semibold Italic",
"Sitka Small",
"Sitka Small Bold",
"Sitka Small Bold Italic",
"Sitka Small Italic",
"Sitka Small Semibold",
"Sitka Small Semibold Italic",
"Sitka Subheading",
"Sitka Subheading Bold",
"Sitka Subheading Bold Italic",
"Sitka Subheading Italic",
"Sitka Subheading Semibold",
"Sitka Subheading Semibold Italic",
"Sitka Text",
"Sitka Text Bold",
"Sitka Text Bold Italic",
"Sitka Text Italic",
"Sitka Text Semibold",
"Sitka Text Semibold Italic",
"Source Han Serif SC Heavy",
"Stylus BT",
"SuperFrench",
"Swiss 721 Black BT",
"Swiss 721 Black Condensed BT",
"Swiss 721 Black Condensed Italic BT",
"Swiss 721 Black Extended BT",
"Swiss 721 Black Italic BT",
"Swiss 721 Black Outline BT",
"Swiss 721 Bold BT",
"Swiss 721 Bold Condensed BT",
"Swiss 721 Bold Condensed Italic BT",
"Swiss 721 Bold Condensed Outline BT",
"Swiss 721 Bold Extended BT",
"Swiss 721 Bold Italic BT",
"Swiss 721 Bold Outline BT",
"Swiss 721 Italic BT",
"Swiss 721 Condensed Italic BT",
"Swiss 721 Light BT",
"Swiss 721 Light Condensed BT",
"Swiss 721 Light Condensed Italic BT",
"Swiss 721 Light Extended BT",
"Swiss 721 Light Italic BT",
"Swiss 721 BT",
"Swiss 721 Condensed BT",
"Swiss 721 Extended BT",
"Syastro",
"Syastro_IV25",
"Syastro_IV50",
"Sylfaen",
"Symap",
"Symap_IV25",
"Symap_IV50",
"Symath",
"Symath_IV25",
"Symath_IV50",
"Symbol",
"Symeteo",
"Symeteo_IV25",
"Symeteo_IV50",
"Symusic",
"Symusic_IV25",
"Symusic_IV50",
"Tahoma",
"Tahoma Negreta",
"Technic",
"TechnicBold",
"TechnicLite",
"Times New Roman Negreta cursiva",
"Times New Roman Negreta",
"Times New Roman cursiva",
"Times New Roman",
"Trebuchet MS Negreta cursiva",
"Trebuchet MS",
"Trebuchet MS Negreta",
"Trebuchet MS Cursiva",
"Txt",
"Txt_IV25",
"Txt_IV50",
"Universal Math 1 BT",
"Verdana",
"Verdana Negreta",
"Verdana Negreta cursiva",
"Verdana Cursiva",
"Vineta BT",
"Webdings",
"Wingdings",
"Wingdings 2",
"Wingdings 3",
"幼圆",
"Yu Gothic Bold",
"Yu Gothic Light",
"Yu Gothic Medium",
"Yu Gothic Regular",
"Yu Gothic UI Bold",
"Yu Gothic UI Light",
"Yu Gothic UI Regular",
"Yu Gothic UI Semibold",
"Yu Gothic UI Semilight"
]
])];
const testString = "mmmmmmmmmmlli"; // 使用 'm' 和 'l' 这种宽度差异明显的字符
const baseSize = 72;
// 创建隐藏的 Canvas
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d', {
willReadFrequently: true
}); // 优化读取性能
canvas.width = 400;
canvas.height = 100;
const availableFonts = [];
// 基准字体，用于对比
const baseFont = "sans-serif";
fontsToTest.forEach(fontFamily => {
// 设置基准字体并测量
ctx.font = `${baseSize}px ${baseFont}`;
const baseWidth = ctx.measureText(testString).width;
// 设置目标字体并测量
ctx.font = `${baseSize}px "${fontFamily}", ${baseFont}`;
const targetWidth = ctx.measureText(testString).width;
// 如果宽度不同，说明字体加载成功（即系统存在该字体）
// 某些情况下可能需要比较高度或像素数据，但 measureText 通常足够
if (targetWidth !== baseWidth) {
availableFonts.push(fontFamily);
}
});
return Promise.resolve(availableFonts);
}
// --- 使用示例 ---
detectAvailableFonts().then(fonts => {
console.log("当前环境可用字体:", fonts);
}).catch(err => {
console.error("字体检测完全失败:", err);
});
编辑器加载中
README.md
# HTML/JS/CSS 项目模板
笔COOL提供的基础HTML项目，样式、脚本分离到单独的文件
## 用途
- 想要简单练习 HTML
- 快速预览AI生成的 HTML
- 展示自己的 HTML 作品
## 文件
- **index.html**： 网页入口文件（笔COOL目前会编译并运行 index.html 以及它所引用的文件）
- **sytle.css**： 样式文件
- **index.js**： 脚本文件
你可以自行添加更多的文件
## 内容
项目介绍
- 通过 `<link rel="stylesheet" href="./style.css">` 引入样式文件
- 通过 `<script src="./index.js"></script>` 引入脚本文件
- 页面显示标题 "Hello 笔.COOL"，副标题 "一笔一划，绘就人生；一码一境，酷创未来。"，一个 HTML 图标
- 控制台输出 `["Hello 笔.COOL 控制台"]`，用于展示控制台能力
## 模板使用
- 首页点击 **创建项目**，选择 **新建 HTML/JS/CSS 项目** 即可使用该模板
- 或访问 https://bi.cool/project 即可快速进入此模版
编辑器加载中
预览页面