มีวิธีในจาวาสคริปต์เพื่อรับชื่อของฟอนต์ทั้งหมด (หรือตระกูลฟอนต์) ที่เบราว์เซอร์สามารถแสดงได้หรือไม่? (ฉันต้องการให้ผู้ใช้ดร็อปดาวน์พร้อมรายการแบบอักษรที่มีทั้งหมดและอนุญาตให้ผู้ใช้เลือกแบบอักษร) ฉันไม่ต้องการให้ฮาร์ดโค้ดรายการนี้ล่วงหน้าหรือส่งลงจากเซิร์ฟเวอร์ (โดยสัญชาตญาณดูเหมือนว่าเบราว์เซอร์ควรจะรู้ว่ามันมีฟอนต์อะไรและสิ่งนี้ควรจะเปิดเผยกับจาวาสคริปต์)
คำตอบ:
เวอร์ชัน JavaScript ค่อนข้างไม่สม่ำเสมอ ได้รับแบบอักษรโดยการทำซ้ำผ่านแบบอักษรที่รู้จักและการทดสอบ
วิธีที่ถูกต้องที่สุด (แม้จะต้องใช้ปลั๊กอินเหมาะสมก) คือการใช้ Flash ที่นี่คุณสามารถรับรายการแบบอักษรโดยไม่ต้องทดสอบทีละแบบโดยใช้มิติข้อมูล
คุณจะต้องตัดสินใจว่าจะมีรายชื่อที่แน่นอนค่าใช้จ่ายของไม่ได้ทำงานบนอุปกรณ์บางอย่าง (iDevices เบราว์เซอร์โดยไม่ต้องปลั๊กอิน Flash ฯลฯ ) หรือที่รายการบางส่วนที่มีการสนับสนุนที่ดีผ่านทางจาวาสคริปต์เท่านั้น
ใช่แล้ว! ฉันดีใจมากที่คุณถามคำถามนี้เพราะตอนนี้ฉันต้องการใช้สิ่งนี้ด้วย
http://www.lalit.org/lab/javascript-css-font-detect
รหัสจากhttp://www.lalit.org/wordpress/wp-content/uploads/2008/05/fontdetect.js?ver=0.3
/**
* JavaScript code to detect available availability of a
* particular font in a browser using JavaScript and CSS.
*
* Author : Lalit Patel
* Website: http://www.lalit.org/lab/javascript-css-font-detect/
* License: Apache Software License 2.0
* http://www.apache.org/licenses/LICENSE-2.0
* Version: 0.15 (21 Sep 2009)
* Changed comparision font to default from sans-default-default,
* as in FF3.0 font of child element didn't fallback
* to parent element if the font is missing.
* Version: 0.2 (04 Mar 2012)
* Comparing font against all the 3 generic font families ie,
* 'monospace', 'sans-serif' and 'sans'. If it doesn't match all 3
* then that font is 100% not available in the system
* Version: 0.3 (24 Mar 2012)
* Replaced sans with serif in the list of baseFonts
*/
/**
* Usage: d = new Detector();
* d.detect('font name');
*/
var Detector = function() {
// a font will be compared against all the three default fonts.
// and if it doesn't match all 3 then that font is not available.
var baseFonts = ['monospace', 'sans-serif', 'serif'];
//we use m or w because these two characters take up the maximum width.
// And we use a LLi so that the same matching fonts can get separated
var testString = "mmmmmmmmmmlli";
//we test using 72px font size, we may use any size. I guess larger the better.
var testSize = '72px';
var h = document.getElementsByTagName("body")[0];
// create a SPAN in the document to get the width of the text we use to test
var s = document.createElement("span");
s.style.fontSize = testSize;
s.innerHTML = testString;
var defaultWidth = {};
var defaultHeight = {};
for (var index in baseFonts) {
//get the default width for the three base fonts
s.style.fontFamily = baseFonts[index];
h.appendChild(s);
defaultWidth[baseFonts[index]] = s.offsetWidth; //width for the default font
defaultHeight[baseFonts[index]] = s.offsetHeight; //height for the defualt font
h.removeChild(s);
}
function detect(font) {
var detected = false;
for (var index in baseFonts) {
s.style.fontFamily = font + ',' + baseFonts[index]; // name of the font along with the base font for fallback.
h.appendChild(s);
var matched = (s.offsetWidth != defaultWidth[baseFonts[index]] || s.offsetHeight != defaultHeight[baseFonts[index]]);
h.removeChild(s);
detected = detected || matched;
}
return detected;
}
this.detect = detect;
};
สรุป
มันทำงานอย่างไร?
รหัสนี้ทำงานบนหลักการง่ายๆที่ว่าอักขระแต่ละตัวจะปรากฏแตกต่างกันในแบบอักษรที่แตกต่างกัน แบบอักษรที่แตกต่างกันจะมีความกว้างและความสูงต่างกันสำหรับสตริงอักขระเดียวกันที่มีขนาดฟอนต์เดียวกัน
มีวิธีดำเนินการโดยใช้ document.fonts
ค่าที่ส่งคืนคืออินเทอร์เฟซ FontFaceSet ของเอกสาร อินเทอร์เฟซ FontFaceSet มีประโยชน์สำหรับการโหลดฟอนต์ใหม่ตรวจสอบสถานะของฟอนต์ที่โหลดก่อนหน้านี้เป็นต้น
function listFonts() {
let { fonts } = document;
const it = fonts.entries();
let arr = [];
let done = false;
while (!done) {
const font = it.next();
if (!font.done) {
arr.push(font.value[0]);
} else {
done = font.done;
}
}
return arr;
}
function listFonts() {
let { fonts } = document;
const it = fonts.entries();
let arr = [];
let done = false;
while (!done) {
const font = it.next();
if (!font.done) {
arr.push(font.value[0].family);
} else {
done = font.done;
}
}
// converted to set then arr to filter repetitive values
return [...new Set(arr)];
}
ฉันได้ทดสอบโดยไม่ต้องเชื่อมโยงแบบอักษรใด ๆ ใน HTML จากนั้นเชื่อมโยงแบบอักษร Roboto ทดสอบอีกครั้งและได้รับการเพิ่มลงในผลลัพธ์
'Arial',
'Arial Black',
'Bahnschrift',
'Calibri',
'Cambria',
'Cambria Math',
'Candara',
'Comic Sans MS',
'Consolas',
'Constantia',
'Corbel',
'Courier New',
'Ebrima',
'Franklin Gothic Medium',
'Gabriola',
'Gadugi',
'Georgia',
'HoloLens MDL2 Assets',
'Impact',
'Ink Free',
'Javanese Text',
'Leelawadee UI',
'Lucida Console',
'Lucida Sans Unicode',
'Malgun Gothic',
'Marlett',
'Microsoft Himalaya',
'Microsoft JhengHei',
'Microsoft New Tai Lue',
'Microsoft PhagsPa',
'Microsoft Sans Serif',
'Microsoft Tai Le',
'Microsoft YaHei',
'Microsoft Yi Baiti',
'MingLiU-ExtB',
'Mongolian Baiti',
'MS Gothic',
'MV Boli',
'Myanmar Text',
'Nirmala UI',
'Palatino Linotype',
'Segoe MDL2 Assets',
'Segoe Print',
'Segoe Script',
'Segoe UI',
'Segoe UI Historic',
'Segoe UI Emoji',
'Segoe UI Symbol',
'SimSun',
'Sitka',
'Sylfaen',
'Symbol',
'Tahoma',
'Times New Roman',
'Trebuchet MS',
'Verdana',
'Webdings',
'Wingdings',
'Yu Gothic',
'American Typewriter',
'Andale Mono',
'Arial',
'Arial Black',
'Arial Narrow',
'Arial Rounded MT Bold',
'Arial Unicode MS',
'Avenir',
'Avenir Next',
'Avenir Next Condensed',
'Baskerville',
'Big Caslon',
'Bodoni 72',
'Bodoni 72 Oldstyle',
'Bodoni 72 Smallcaps',
'Bradley Hand',
'Brush Script MT',
'Chalkboard',
'Chalkboard SE',
'Chalkduster',
'Charter',
'Cochin',
'Comic Sans MS',
'Copperplate',
'Courier',
'Courier New',
'Didot',
'DIN Alternate',
'DIN Condensed',
'Futura',
'Geneva',
'Georgia',
'Gill Sans',
'Helvetica',
'Helvetica Neue',
'Herculanum',
'Hoefler Text',
'Impact',
'Lucida Grande',
'Luminari',
'Marker Felt',
'Menlo',
'Microsoft Sans Serif',
'Monaco',
'Noteworthy',
'Optima',
'Palatino',
'Papyrus',
'Phosphate',
'Rockwell',
'Savoye LET',
'SignPainter',
'Skia',
'Snell Roundhand',
'Tahoma',
'Times',
'Times New Roman',
'Trattatello',
'Trebuchet MS',
'Verdana',
'Zapfino',
const fontCheck = new Set([
// Windows 10
'Arial', 'Arial Black', 'Bahnschrift', 'Calibri', 'Cambria', 'Cambria Math', 'Candara', 'Comic Sans MS', 'Consolas', 'Constantia', 'Corbel', 'Courier New', 'Ebrima', 'Franklin Gothic Medium', 'Gabriola', 'Gadugi', 'Georgia', 'HoloLens MDL2 Assets', 'Impact', 'Ink Free', 'Javanese Text', 'Leelawadee UI', 'Lucida Console', 'Lucida Sans Unicode', 'Malgun Gothic', 'Marlett', 'Microsoft Himalaya', 'Microsoft JhengHei', 'Microsoft New Tai Lue', 'Microsoft PhagsPa', 'Microsoft Sans Serif', 'Microsoft Tai Le', 'Microsoft YaHei', 'Microsoft Yi Baiti', 'MingLiU-ExtB', 'Mongolian Baiti', 'MS Gothic', 'MV Boli', 'Myanmar Text', 'Nirmala UI', 'Palatino Linotype', 'Segoe MDL2 Assets', 'Segoe Print', 'Segoe Script', 'Segoe UI', 'Segoe UI Historic', 'Segoe UI Emoji', 'Segoe UI Symbol', 'SimSun', 'Sitka', 'Sylfaen', 'Symbol', 'Tahoma', 'Times New Roman', 'Trebuchet MS', 'Verdana', 'Webdings', 'Wingdings', 'Yu Gothic',
// macOS
'American Typewriter', 'Andale Mono', 'Arial', 'Arial Black', 'Arial Narrow', 'Arial Rounded MT Bold', 'Arial Unicode MS', 'Avenir', 'Avenir Next', 'Avenir Next Condensed', 'Baskerville', 'Big Caslon', 'Bodoni 72', 'Bodoni 72 Oldstyle', 'Bodoni 72 Smallcaps', 'Bradley Hand', 'Brush Script MT', 'Chalkboard', 'Chalkboard SE', 'Chalkduster', 'Charter', 'Cochin', 'Comic Sans MS', 'Copperplate', 'Courier', 'Courier New', 'Didot', 'DIN Alternate', 'DIN Condensed', 'Futura', 'Geneva', 'Georgia', 'Gill Sans', 'Helvetica', 'Helvetica Neue', 'Herculanum', 'Hoefler Text', 'Impact', 'Lucida Grande', 'Luminari', 'Marker Felt', 'Menlo', 'Microsoft Sans Serif', 'Monaco', 'Noteworthy', 'Optima', 'Palatino', 'Papyrus', 'Phosphate', 'Rockwell', 'Savoye LET', 'SignPainter', 'Skia', 'Snell Roundhand', 'Tahoma', 'Times', 'Times New Roman', 'Trattatello', 'Trebuchet MS', 'Verdana', 'Zapfino',
].sort());
(async() => {
await document.fonts.ready;
const fontAvailable = new Set();
for (const font of fontCheck.values()) {
if (document.fonts.check(`12px "${font}"`)) {
fontAvailable.add(font);
}
}
console.log('Available Fonts:', [...fontAvailable.values()]);
})();<SCRIPT>
function getFonts()
{
var nFontLen = dlgHelper.fonts.count;
var rgFonts = new Array();
for ( var i = 1; i < nFontLen + 1; i++ )
rgFonts[i] = dlgHelper.fonts(i);
rgFonts.sort();
for ( var j = 0; j < nFontLen; j++ )
document.write( rgFonts[j] + "<BR>" );
}
</SCRIPT>
<BODY onload="getFonts()">
<OBJECT id=dlgHelper CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="0px">
</OBJECT>
ฉันเพิ่มสองวิธีในเครื่องตรวจจับของ Lalit Patel ด้านบน:
ด้วยสิ่งนี้คุณสามารถทำได้:
fonts = [ 'Arial', 'Arial Black', { family: 'Lato', stylesheetUrl: 'https://fonts.googleapis.com/css?family=Lato'}, 'Leelawadee UI']
(new FontDetector()).addFontsArr(fonts);
รหัส:
/**
* JavaScript code to detect available availability of a
* particular font in a browser using JavaScript and CSS.
*
* Author : Lalit Patel
* Website: http://www.lalit.org/lab/javascript-css-font-detect/
* License: Apache Software License 2.0
* http://www.apache.org/licenses/LICENSE-2.0
* Version: 0.15 (21 Sep 2009)
* Changed comparision font to default from sans-default-default,
* as in FF3.0 font of child element didn't fallback
* to parent element if the font is missing.
* Version: 0.2 (04 Mar 2012)
* Comparing font against all the 3 generic font families ie,
* 'monospace', 'sans-serif' and 'sans'. If it doesn't match all 3
* then that font is 100% not available in the system
* Version: 0.3 (24 Mar 2012)
* Replaced sans with serif in the list of baseFonts
*/
/**
* Usage: d = new Detector();
* d.detect('font name');
*/
function FontDetector() {
this.detect = detect;
this.addFont = addFont;
this.addFontsArr = addFontsArr;
// a font will be compared against all the three default fonts.
// and if it doesn't match all 3 then that font is not available.
var baseFonts = ['monospace', 'sans-serif', 'serif'];
//we use m or w because these two characters take up the maximum width.
// And we use a LLi so that the same matching fonts can get separated
var testString = "mmmmmmmmmmlli";
//we test using 72px font size, we may use any size. I guess larger the better.
var testSize = '72px';
var h = document.getElementsByTagName("body")[0];
// create a SPAN in the document to get the width of the text we use to test
var s = document.createElement("span");
s.style.fontSize = testSize;
s.innerHTML = testString;
var defaultWidth = {};
var defaultHeight = {};
for (var index in baseFonts) {
//get the default width for the three base fonts
s.style.fontFamily = baseFonts[index];
h.appendChild(s);
defaultWidth[baseFonts[index]] = s.offsetWidth; //width for the default font
defaultHeight[baseFonts[index]] = s.offsetHeight; //height for the defualt font
h.removeChild(s);
}
function detect(font) {
var detected = false;
for (var index in baseFonts) {
s.style.fontFamily = font + ',' + baseFonts[index]; // name of the font along with the base font for fallback.
h.appendChild(s);
var matched = (s.offsetWidth != defaultWidth[baseFonts[index]] || s.offsetHeight != defaultHeight[baseFonts[index]]);
h.removeChild(s);
detected = detected || matched;
}
return detected;
}
function addFont(family, stylesheetUrl, ruleString) {
if (detect(family)) {
//console.log('using internal font '+family);
return true;
}
if (stylesheetUrl) {
console.log('added stylesheet '+stylesheetUrl);
var head = document.head, link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = stylesheetUrl;
head.appendChild(link);
return true;
}
if (ruleString) {
console.log('adding font rule:'+rule);
var newStyle = document.createElement('style');
newStyle.appendChild(document.createTextNode(rule));
document.head.appendChild(newStyle);
return true;
}
console.log('could not add font '+family);
}
function addFontsArr(arr) {
arr.forEach(a => typeof a==='string' ? addFont(a) : addFont(a.family, a.stylesheetUrl, a.ruleString));
}
};
ในการค้นหาสิ่งนี้ฉันยังพบFont.jsซึ่งเพิ่มอ็อบเจ็กต์ Font เหมือนกับ Image ดังนั้นจึงเป็นไปได้ที่จะตรวจสอบเมื่อแบบอักษรพร้อมใช้งานจริง ใช้งานได้กับแบบอักษรที่ติดตั้ง / ระบบ ข้อเสียคือ IE9 + เท่านั้นเนื่องจากต้องการObject.defineProperty(เบราว์เซอร์อื่นมี) แต่ถ้าคุณกำลังทำเว็บสมัยใหม่ดูเหมือนว่าเป็นตัวเลือกที่ดีกว่า (น่าเศร้าที่ฉันจะต้องตอบรับคำตอบข้างต้นเพิ่มคะแนนและดำเนินการต่อในตอนนี้ :))
คำตอบสั้น ๆ คือ ไม่ค่อยมีการเปลี่ยนแปลงเกี่ยวกับการตรวจจับแบบอักษรในเบราว์เซอร์ในปี 2020 ยกเว้นว่าการใช้ Flash นั้นเป็นความคิดที่แย่ลงไปอีก
ขณะนี้ไม่มีระบบเนทีฟของเบราว์เซอร์ที่จะ "แสดงรายการ" แบบอักษรที่มีอยู่ทั้งหมด อย่างไรก็ตามเบราว์เซอร์จะช่วยให้คุณตรวจสอบว่าตัวอักษรที่มีการโหลด / พร้อมใช้FontFaceSet API รองรับได้ดีในเบราว์เซอร์สมัยใหม่
สิ่งนี้มีไว้เพื่อแสดงว่ามีการดาวน์โหลดแบบอักษรของเว็บหรือไม่ แต่จะใช้ได้กับแบบอักษรของระบบด้วย สิ่งที่จับได้คือคุณต้องระบุรายการแบบอักษรเพื่อตรวจสอบ
ดังนั้นเมื่อใช้ร่วมกับการuser agent ทดสอบ (ไม่ถูกต้องเสมอไป) คุณสามารถสร้างรายการแบบอักษรระบบทั่วไปสำหรับอุปกรณ์แต่ละประเภทได้ จากนั้นทดสอบกับแบบอักษรเหล่านั้นและแบบอักษรของเว็บที่คุณโหลด
หมายเหตุ:สิ่งนี้จะไม่ให้รายการแบบอักษรทั้งหมดที่มีให้คุณ แต่คุณสามารถตรวจสอบแบบอักษรที่ติดตั้งโดยทั่วไปโดยผลิตภัณฑ์ MS Office หรือ Adobe
บางทีสิ่งนี้อาจทำได้ในวิธีที่แตกต่างไปจากเดิมอย่างสิ้นเชิงโดยใช้สไปรท์ชีทที่มีภาพแบบอักษรที่รู้จักสำหรับอักขระเฉพาะและเปรียบเทียบกับสแนปชอตขององค์ประกอบผ้าใบที่มีการวาดอักขระเดียวกันกับสิ่งที่เบราว์เซอร์รายงานเป็นแบบอักษรเดียวกัน การเปรียบเทียบอาจจะทำกับสิ่งที่ต้องการresemble.js
ซึ่งช้ากว่า แต่ควรช่วยให้เราตรวจจับได้เมื่อเบราว์เซอร์โกหก
เมื่อไม่นานมานี้ฉันสังเกตเห็นว่าถ้าฉันตั้งค่า context.font สำหรับผ้าใบ HTML5 เป็นสิ่งที่ไม่ถูกต้องเช่น "ขยะ" การเปลี่ยนแปลงจะถูกละเว้นโดยแคนวาส ฉันไม่ทราบว่านี่เป็นเบราว์เซอร์เฉพาะหรือไม่ แต่ดูเหมือนว่าจะใช้ได้กับ Chrome ฉันยังเห็นโพสต์อื่น ๆ ( แบบอักษรผ้าใบ HTML 5 ถูกละเว้น ) ที่ระบุว่าเกิดขึ้นในเบราว์เซอร์อื่น
จากนั้นเราสามารถเขียนสตริงที่มีค่าเริ่มต้นซึ่งฉันเชื่อว่าคือ "10px sans serif" ( https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/font ) ตั้งค่าแบบอักษร คุณกำลังทดสอบและเขียนสตริงอีกครั้ง หากเหมือนกับภาพวาดแรกแสดงว่าฟอนต์นั้นไม่สามารถใช้ได้
Font access APIพร้อมใช้งานใน Chrome 87:
// Query for all available fonts and log metadata.
const fonts = navigator.fonts.query();
try {
for await (const metadata of fonts) {
console.log(`${metadata.family} (${metadata.fullName})`);
}
} catch (err) {
console.error(err);
}
// Roboto (Roboto Black)
// Roboto (Roboto Black Italic)
// Roboto (Roboto Bold)
ข้อมูลเพิ่มเติมที่นี่
ขณะนี้ใช้ได้เฉพาะในรูปแบบแฟ
chrome://flags/#font-accessล็ก( ) ใน Chrome 87+
คุณสามารถใช้Local Font Access API ใหม่เพื่อระบุแบบอักษรทั้งหมด:
const getInstalledFonts = async () => {
const { state } = await navigator.permissions.query({ name: "font-access" })
if (state === "denied") {
return []
}
const fonts = []
try {
for await (const { family, fullName } of navigator.fonts.query()) {
fonts.push({ family, fullName })
}
} catch {}
return fonts
}
console.log(await getInstalledFonts())
//=> [{ family: "Roboto", fullName: "Roboto Thin" }, { family: "Roboto", fullName: "Roboto Thin Italic" }]