ব্রাউজারটি দেখাতে পারে এমন সমস্ত ফন্টের (বা ফন্ট-পরিবার) নাম পেতে জাভাস্ক্রিপ্টের কোনও উপায় আছে কি? (আমি সমস্ত উপলব্ধ ফন্টের তালিকা সহ ব্যবহারকারীকে একটি ড্রপডাউন দিতে এবং ব্যবহারকারীকে একটি ফন্ট চয়ন করতে দিতে চাই)) আমি এই তালিকাটি আগেই হার্ডকোড না করে সার্ভার থেকে নামিয়ে না নেওয়ার পছন্দ করব। (স্বজ্ঞাতভাবে, মনে হয় ব্রাউজারটির কী ফন্ট রয়েছে তা জেনে রাখা উচিত এবং এটি কোনওভাবে জাভাস্ক্রিপ্টের কাছে প্রকাশ করা উচিত))
উত্তর:
জাভাস্ক্রিপ্ট সংস্করণটি কিছুটা স্বচ্ছ। এটি পরিচিত ফন্ট এবং পরীক্ষার মাধ্যমে পুনরুক্তি করে ফন্টগুলি পায়।
সর্বাধিক নির্ভুল উপায় (যদিও স্বতন্ত্র প্লাগইন ব্যবহার করা উচিত ) হ'ল ফ্ল্যাশ ব্যবহার করা । এখানে আপনি ফন্টগুলির জন্য মাত্রা ব্যবহার করে স্বতন্ত্রভাবে পরীক্ষা না করেই তাদের তালিকা পেতে পারেন।
কিছু ডিভাইস (আইডিওয়াইসস, ফ্ল্যাশ প্লাগইন ছাড়া ব্রাউজারগুলি ইত্যাদি) বা কেবল জাভাস্ক্রিপ্টের মাধ্যমে আরও ভাল সমর্থন সহ একটি আংশিক তালিকাতে কাজ না করার ব্যয়ে সঠিক তালিকা রয়েছে কিনা তা আপনাকে সিদ্ধান্ত নিতেই হবে ।
হ্যা এখানে! আপনি এই প্রশ্নটি জিজ্ঞাসা করে আমি খুব আনন্দিত কারণ আমিও এখন এটি ব্যবহার করতে চাই।
প্রশ্নের জন্য +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
প্রত্যাবর্তিত মান হ'ল নথির ফন্টফ্রেসেট ইন্টারফেস। নতুন ফন্টগুলি লোড করা, পূর্বে লোড হওয়া ফন্টগুলির স্থিতি পরীক্ষা করা ইত্যাদির জন্য ফন্টফিজসেট ইন্টারফেসটি কার্যকর is
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)];
}
আমি এটি এইচটিএমএলে কোনও ফন্টের সংযোগ ছাড়াই এটি পরীক্ষা করেছি, তারপরে রোবোটো ফন্টের লিঙ্ক করেছি, আবার পরীক্ষা করেছি এবং এটি ফলাফলের সাথে যুক্ত হয়েছে।
'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>
আমি উপরে ললিত প্যাটেলের ডিটেক্টরটিতে দুটি পদ্ধতি যুক্ত করেছি:
এটি দিয়ে আপনি করতে পারেন:
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));
}
};
এর জন্য অনুসন্ধানে, আমি ফন্ট.জেএসও পেয়েছি , যা চিত্রের মতো একটি ফন্ট বস্তু যুক্ত করে, তাই ফন্টটি ব্যবহারের জন্য আসলে প্রস্তুত কিনা তা পরীক্ষা করা সম্ভব। ইনস্টলড / সিস্টেম ফন্টেও কাজ করে। ডাউনসাইডটি শুধুমাত্র প্রয়োজনের কারণে আই 9 9 + রয়েছে Object.defineProperty(অন্যান্য ব্রাউজারগুলি এটি রয়েছে) তবে আপনি যদি আধুনিক ওয়েব করছেন তবে এটি আরও ভাল বিকল্প বলে মনে হচ্ছে। (দুর্ভাগ্যক্রমে, আমি উপরের উত্তরটি দিয়ে চলতে হবে, আপডোভেটেড এবং আপাতত এগিয়ে যাব। :))
সংক্ষিপ্ত উত্তরটি হ'ল। ফ্ল্যাশ ব্যবহার করা এখন আরও খারাপ ধারণা ব্যতীত ২০২০ সালে ব্রাউজারগুলিতে হরফ ফন্ট সনাক্তকরণ সম্পর্কিত খুব বেশি পরিবর্তন ঘটেনি ।
সমস্ত উপলব্ধ ফন্টগুলি "তালিকা" তৈরি করার জন্য বর্তমানে ব্রাউজারের নেটিভ সিস্টেম নেই। তবে ব্রাউজারগুলি আপনাকে ফন্টফ্রেসেট এপিআই ব্যবহার করে কোনও ফন্ট লোড করা / প্রস্তুত কিনা তা পরীক্ষা করতে দেবে let । এটি আধুনিক ব্রাউজারগুলিতে বেশ ভাল সমর্থিত।
এটি কোনও ওয়েব ফন্ট পুরোপুরি ডাউনলোড হয়েছে কিনা তা দেখানোর উদ্দেশ্যে এটি কিন্তু এটি সিস্টেম ফন্টগুলির জন্যও কাজ করবে। ক্যাচটি হল আপনাকে একটি তালিকা সরবরাহ করতে হবে ফন্টের করতে হবে।
সুতরাং একটি user agent পরীক্ষার সাথে মিলিত (সর্বদা সঠিক নয়), আপনি সাধারণ সিস্টেম ফন্টগুলির একটি তালিকা তৈরি করতে পারেন প্রতিটি ডিভাইসের ধরণের জন্য । তারপরে এবং আপনার লোড হওয়া কোনও ওয়েব ফন্টের বিরুদ্ধে পরীক্ষা করুন।
দ্রষ্টব্য: এটি আপনাকে উপলভ্য ফন্টগুলির একটি সম্পূর্ণ তালিকা দেবে না, তবে আপনি এমএস অফিস বা অ্যাডোব পণ্য দ্বারা সাধারণত ইনস্টল করা ফন্টগুলির জন্য পরীক্ষা করতে পারেন।
কোনও নির্দিষ্ট চরিত্রের জন্য পরিচিত ফন্টের চিত্রগুলির সাথে একটি স্প্রিটশিট ব্যবহার করে এবং ব্রাউজারটি একই ফন্ট হিসাবে যা বর্ণিত হয়েছে তার সাথে একই অক্ষরটি আঁকছে এমন কোনও ক্যানভাস উপাদানটির স্ন্যাপশটের সাথে তুলনা করে এটি সম্পূর্ণ ভিন্ন উপায়ে করা যেতে পারে। তুলনাটি সদৃশ.জেদের মতো কিছু দিয়ে করা যেতে পারে ।
এটি ধীর গতির, তবে ব্রাউজারটি কখন মিথ্যা রয়েছে তা সনাক্ত করতে আমাদেরও অনুমতি দেওয়া উচিত।
আমি সম্প্রতি লক্ষ্য করেছি যে আমি যদি এইচটিএমএল 5 ক্যানভাসের জন্য কনটেক্সট.ফন্টের মান সেট করি তবে "জাঙ্ক" এর মতো কোনও অবৈধ কিছুতে, পরিবর্তনটি ক্যানভাস দ্বারা উপেক্ষা করা হবে। এটি ব্রাউজার নির্দিষ্ট কিনা তা আমি জানি না তবে এটি Chrome এ এভাবে কাজ করবে বলে মনে হচ্ছে। আমি অন্যান্য পোস্টগুলিও দেখেছি ( এইচটিএমএল 5 ক্যানভাস হরফ উপেক্ষা করা হচ্ছে ) যা অন্যান্য ব্রাউজারগুলিতে এটি ঘটে তা নির্দেশ করে।
তারপরে কেউ ডিফল্ট মান সহ একটি স্ট্রিং লিখতে পারে, যা আমি বিশ্বাস করি যে "10px সং সেরিফ" ( https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/font ), ফন্টটি সেট করুন আপনি যা পরীক্ষা করছেন এবং সেই স্ট্রিংটি আবার লিখুন। এটি যদি প্রথম অঙ্কনের মতো হয় তবে ফন্টটি পাওয়া যায় না।