क्या जावास्क्रिप्ट में सभी फोंट (या फ़ॉन्ट-परिवारों) के नाम प्राप्त करने का एक तरीका है जो ब्राउज़र दिखा सकता है? (मैं सभी उपलब्ध फोंट की सूची के साथ उपयोगकर्ता को एक ड्रॉपडाउन देना चाहता हूं, और उपयोगकर्ता को एक फ़ॉन्ट चुनने की अनुमति देता हूं।) मैं इस सूची को समय से पहले हार्डकोड नहीं करना चाहूंगा या इसे सर्वर से नीचे नहीं भेजूंगा। (सहज रूप से, ऐसा लगता है जैसे ब्राउज़र को पता होना चाहिए कि उसके पास क्या फोंट हैं और इसे किसी तरह जावास्क्रिप्ट में उजागर किया जाना चाहिए।)
जवाबों:
जावास्क्रिप्ट संस्करण थोड़ा परतदार है। यह ज्ञात फोंट और परीक्षण के माध्यम से पुनरावृति द्वारा फ़ॉन्ट प्राप्त करता है।
सबसे सटीक तरीका (यद्यपि एक प्लगइन का उपयोग करने के लिए ) फ्लैश का उपयोग करने के लिए है । यहां आप फोंट की सूची प्राप्त कर सकते हैं बिना उनके लिए व्यक्तिगत रूप से आयामों का परीक्षण किए।
आपको यह तय करना होगा कि कुछ उपकरणों पर काम न करने की कीमत पर सटीक सूची हो (iDevices, Browser without Flash plugin, etc), या आंशिक सूची केवल जावास्क्रिप्ट के माध्यम से बेहतर समर्थन के साथ ।
हाँ वहाँ है! मुझे खुशी है कि आपने यह सवाल पूछा क्योंकि मैं अब इसका भी उपयोग करना चाहता हूं।
सवाल के लिए +1, और यहाँ आपका जवाब है :)
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 में किसी भी फॉन्ट को लिंक किए बिना इसे टेस्ट किया है, फिर रोबोटो फॉन्ट से जोड़ा है, फिर से टेस्ट किया और यह रिजल्ट में जुड़ गया।
<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>'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()]);
})();इसकी खोज में, मुझे Font.js भी मिला , जो कि इमेज की तरह एक फॉन्ट ऑब्जेक्ट जोड़ता है, इसलिए यह जांचना संभव है कि कोई फ़ॉन्ट वास्तव में उपयोग करने के लिए तैयार है या नहीं। इंस्टॉल / सिस्टम फोंट पर भी काम करता है। डाउनसाइड IE9 + केवल आवश्यकता के कारण Object.defineProperty(अन्य ब्राउज़रों के पास है), लेकिन यदि आप आधुनिक वेब कर रहे हैं, तो यह और भी बेहतर विकल्प लगता है। (मैं दुखी होऊंगा, ऊपर के उत्तर के साथ जाना होगा, उत्थान और अभी के लिए आगे बढ़ना होगा। :)
मैंने ऊपर ललित पटेल के डिटेक्टर में दो तरीके जोड़े:
इसके साथ आप यह कर सकते हैं:
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));
}
};हो सकता है कि यह एक पूरी तरह से अलग तरीके से किया जा सकता है, एक विशिष्ट चरित्र के लिए ज्ञात फ़ॉन्ट छवियों के साथ स्प्राइटशीट का उपयोग करना और तुलना करना कि एक कैनवास तत्व के स्नैपशॉट के साथ, जिस पर उसी चरित्र को खींचा जाता है जो ब्राउज़र एक ही फ़ॉन्ट के रूप में रिपोर्ट करता है। तुलना कुछ समान जैसी हो सकती है । जेएस ।
यह धीमा है, लेकिन हमें यह भी पता लगाना चाहिए कि ब्राउज़र कब झूठ है।
संक्षिप्त उत्तर है। 2020 में ब्राउज़रों में फोंट डिटेक्शन के बारे में बहुत कुछ नहीं बदला गया है, सिवाय इसके कि फ्लैश का उपयोग करना अब और भी बुरा विचार है ।
वर्तमान में सभी उपलब्ध फोंट को "लिस्ट" करने के लिए कोई ब्राउज़र नेटिव सिस्टम नहीं है। हालाँकि, यदि फॉन्टफेससेट एपीआई का उपयोग करके किसी फॉन्ट को लोड / रेडी किया गया है, तो ब्राउजर आपको जाँचने देगा । यह आधुनिक ब्राउज़रों में बहुत अच्छी तरह से समर्थित है।
यह दिखाने का इरादा है कि क्या कोई वेब फ़ॉन्ट पूरी तरह से डाउनलोड किया गया है, लेकिन यह सिस्टम फोंट के लिए भी काम करेगा। पकड़ने के लिए आपको फोंट की एक सूची प्रदान करनी होगी ।
तो एक user agent परीक्षण के साथ संयोजन में (हमेशा सटीक नहीं), आप प्रत्येक डिवाइस प्रकार के लिए सामान्य सिस्टम फोंट की एक सूची तैयार कर सकते हैं । फिर उन और किसी भी वेब फोंट के खिलाफ परीक्षण करें जो आप लोड करते हैं।
नोट: यह आपको उपलब्ध फोंट की पूरी सूची नहीं देगा, लेकिन आप आमतौर पर एमएस ऑफिस या एडोब उत्पादों द्वारा स्थापित फोंट की जांच कर सकते हैं।
मैंने हाल ही में देखा है कि अगर मैं HTML5 कैनवास के लिए reference.font मान सेट करता हूं, तो कुछ अमान्य, जैसे "जंक", परिवर्तन को कैनवास द्वारा अनदेखा किया जाता है। मुझे नहीं पता कि यह ब्राउज़र विशिष्ट है, लेकिन यह क्रोम पर इस तरह से काम करता है। मैंने अन्य पोस्ट ( HTML 5 कैनवस फॉन्ट को नजरअंदाज किए जाने ) भी देखा है जो यह संकेत देते हैं कि यह अन्य ब्राउज़रों में होता है।
फिर डिफ़ॉल्ट मान के साथ एक स्ट्रिंग लिख सकता है, जो मुझे लगता है कि "10px सेन्स सेरिफ़" ( https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContex2D/font ) है, फ़ॉन्ट सेट करें एक आप परीक्षण कर रहे हैं और फिर से स्ट्रिंग लिखें। यदि यह पहली ड्राइंग के समान है, तो फ़ॉन्ट उपलब्ध नहीं है।