একটি ওয়েব পৃষ্ঠাতে কোন ফন্টটি ব্যবহার করা হয়েছে তা সনাক্ত করা

ধরুন আমি আমার পৃষ্ঠায় নিম্নলিখিত CSS নিয়ম আছে:

body {
    font-family: Calibri, Trebuchet MS, Helvetica, sans-serif;
}

ব্যবহারকারীর ব্রাউজারে সংজ্ঞায়িত ফন্টগুলির কোনটি ব্যবহার করা হয়েছে তা আমি কীভাবে সনাক্ত করতে পারি?

Edit for people wondering why I want to do this: The font I'm detecting contains glyph's that are not available in other fonts and when the user does not have the font I want to display a link asking the user to download that font so they can use my web application with the correct font.

বর্তমানে আমি সকল ব্যবহারকারীর জন্য ডাউনলোড ফন্ট লিঙ্কে প্রদর্শন করছি, আমি শুধু এই লোকেদের জন্য এটি প্রদর্শন করতে চাই যাদের সঠিক ফন্ট ইনস্টল করা নেই।

0
মনে রাখা এক জিনিস যে কিছু ব্রাউজার অনুরূপ ফন্টের সাথে নির্দিষ্ট অনুপস্থিত ফন্ট প্রতিস্থাপিত হবে, যা জাভাস্ক্রিপ্ট / CSS কৌশলের ব্যবহার সনাক্ত করতে অসম্ভব। উদাহরণস্বরূপ, উইন্ডোজ ব্রাউজার হেল্লেটিিকা জন্য আরিফ প্রতিস্থাপন করবে যদি এটি ইনস্টল না করা হয়। উল্লেখ্য, হোয়াটফ্লটার এবং ড্র্যাগটম্যাঙ্কের কৌতুক এখনও হেল্লেটিকা ​​ইনস্টল করা আছে তা জানাবে, যদিও তা নয়।
যোগ লেখক tlrobinson, উৎস
সাবধানতার একটি ছোট নোট: আপনি Calibri ডাউনলোড করার জন্য একটি লিঙ্ক প্রদান করছেন, তবে সচেতন থাকবেন যদিও এটি বেশ কয়েকটি মাইক্রোসফট পণ্যগুলির মধ্যে আবদ্ধ, এটি না একটি বিনামূল্যের ফন্ট। ডাউনলোড করার জন্য
যোগ লেখক Adam Hepton, উৎস

11 উত্তর

আমি এটি একটি ধরনের iffy সম্পন্ন করেছি, কিন্তু চমত্কার নির্ভরযোগ্য উপায়। মূলত, একটি উপাদান একটি নির্দিষ্ট ফন্ট ব্যবহার করা হয় এবং একটি স্ট্রিং যে উপাদান সেট করা হয় যদি উপাদানটির জন্য ফন্ট সেট না থাকে, তবে এটি মূল উপাদানটির ফন্টটি গ্রহণ করে। তাই, তারা যা করে তা লম্বিত স্ট্রিংয়ের প্রস্থ পরিমাপ করে। যদি তারা প্রাপ্ত উপায়ে বিপরীত ফন্টের জন্য প্রত্যাশিত ফন্টের সাথে মিলিত হয় তবে এটি বর্তমান।

Here's where it came from: Javascript/CSS Font Detector (ajaxian.com; 12 Mar 2007)

0
যোগ
পরিমাপ থেকে ক্যানভাস উপাদান ব্যবহার করে আরেকটি পদ্ধতি: github.com / Wildhoney / DetectFont
যোগ লেখক Wildhoney, উৎস

আমি ফাউট ব্যবহার করছি আপনি শুধু আপনার বুকমার্কস বারে Fount বোতাম টেনে আনুন, এটিতে ক্লিক করুন এবং তারপর ওয়েবসাইটের নির্দিষ্ট পাঠ্যটি ক্লিক করুন। এটি তখন সেই পাঠ্যের ফন্টটি দেখাবে।

https://fount.artequalswork.com/

0
যোগ

I wrote a simple JavaScript tool that you can use it to check if a font is installed or not.
It uses simple technique and should be correct most of the time.

jFont Checker on github

0
যোগ
@JonLennartAasenden ব্যবহার করা ফন্ট পেতে আমি বিশ্বাস করি যে আপনি "গণনাকৃত স্টাইল" সম্পত্তি ব্যবহার করতে পারেন (আমি সঠিক নাম ভুলে গেছি কিন্তু এটি এমন কিছু।)
যোগ লেখক Derek 朕會功夫, উৎস
ফন্ট সনাক্তকরণ সমস্যা সমাধান না। আপনি এটি ব্যবহার করে ফন্টটি পুনরাবৃত্ত করে ফন্টটি ব্যবহার করতে পারেন এবং বৈধ কি কি তা পরীক্ষা করতে পারেন, তবে কোনও প্রদত্ত DIW- এর জন্য কোনও ফন্ট ব্যবহৃত হয় তার সম্পর্কে সামান্য বা কোনও তথ্য দেয় না। আপনি যদি ডিএসবি থেকে JS তৈরি করেন তবে কীভাবে ফন্ট ব্যবহার করা যায় তা আমরা কিভাবে জানতে পারি?
যোগ লেখক Jon Lennart Aasenden, উৎস
আমি সব ব্রাউজারে কাজ করে এমন একটি ক্লাস লিখেছি। এটি স্মার্ট পাਸਕতে লিখিত আছে যা JS এর ​​সাথে কম্পাইল করে, তাই আমি সত্যিই এখানে সমাধানটি পোস্ট করতে পারি না - কিন্তু সংক্ষিপ্তভাবে, ফন্ট-পরিবার স্ট্রিংটি খুঁজে বের করতে হবে, তারপর পরীক্ষা করুন যে প্রতিটি ফন্টটি বৈধ ছিল, প্রথমে যেটি বৈধ ছিল তা ধরুন - এবং এটি সব জায়গায় কাজ করে আমি স্মার্ট প্যাসকেল থেকে "ফন্ট ডিসট্রাটর" উপর পোর্ট করা এবং কিছু tweaks করেনি।
যোগ লেখক Jon Lennart Aasenden, উৎস
এই গৃহীত উত্তর হতে হবে! গ্রেট কাজের @ ডেরেক
যোগ লেখক mkoistinen, উৎস
@ জোনলেনার্টআসেনডেন আপনার ক্লাসের মত স্পষ্ট নয়। ব্রাউজার ইনস্টল করা হলে, প্রদত্ত অগ্রাধিকারের প্রতিটি ফন্টটি ব্রাউজ করবে, কিন্তু কখনও কখনও তালিকাতে একটি নিম্ন অগ্রাধিকার ফন্ট ব্যবহার করার জন্য বেছে নেবে, যদি উচ্চ অগ্রাধিকার, ইনস্টল করা ফন্টের অনুপস্থিত অক্ষর বা গ্লিপগুলি মাপের আকারের মাপ মেলে না।
যোগ লেখক Brandon Elliott, উৎস

আপনি এই ওয়েবসাইট ব্যবহার করতে পারেন:

http://website-font-analyzer.com/

এটা ঠিক আপনি কি চান ...

0
যোগ

আপনি ফন্টের পরে ফন্ট-পরিবারে অ্যাডোব ফাঁকা বসাতে পারেন দেখতে চান, এবং তারপর যে ফাঁকা কোন glyphs রেন্ডার করা হবে না।

উদাঃ .:

font-family: Arial, 'Adobe Blank';

যতক্ষণ আমি সচেতন থাকব, ততক্ষণ কোনও বস্তুতে কোন গ্লিফ প্রকাশ করা হবে না তা জানার জন্য কোনও জেনারেটর পদ্ধতি নেই যা সেই উপাদানটির জন্য ফন্টের স্ট্যাকের ফন্ট দ্বারা উপস্থাপিত হচ্ছে।

এটি সেরিফ / সান-সেরিফ / মনিসপাস ফন্টের জন্য ব্রাউজারের ব্যবহারকারী সেটিংস দ্বারা জটিল হয়ে ওঠে এবং তাদের নিজস্ব হার্ড-কোডেড ফলো-ব্যাক ফন্ট রয়েছে যা তারা ব্যবহার করবে যদি কোনও ফাঁকা ফাঁকা কোন ফন্ট পাওয়া যায় না ফন্ট স্ট্যাক তাই ব্রাউজার ফন্ট স্ট্যাক বা ব্যবহারকারীর ব্রাউজারের ফন্ট সেটিংসে নয় এমন ফন্টের মধ্যে কিছু গ্লিফ উপস্থাপন করতে পারে। Chrome Dev সরঞ্জামগুলি আপনাকে নির্বাচিত উপাদানটির মধ্যে গ্লিফগুলির জন্য প্রতিটি রেন্ডার ফন্ট দেখাবে তাই আপনার মেশিনে আপনি এটি করছেন কি দেখতে পারেন, কিন্তু একটি ব্যবহারকারী এর মেশিনে ঘটছে কি বলতে কোন উপায় নেই।

এটিও সম্ভব যে ব্যবহারকারীর সিস্টেমটি এইরকম একটি অংশ হিসাবে খেলা করতে পারে যেমন glyph স্তরে উইন্ডো ফন্ট প্রতিস্থাপন হয় ।

তাই ...

আপনি যে গ্লাইফগুলি আগ্রহী, আপনার ব্যবহারকারীর ব্রাউজার / সিস্টেমে ফ্লেব্যাক দ্বারা উপস্থাপিত হবে কিনা তা জানার কোনও উপায় নেই, এমনকি যদি তাদের আপনার নির্দিষ্ট ফন্ট না থাকে।

যদি আপনি এটিকে জেসিতে পরীক্ষা করতে চান তবে আপনি অ্যাডোবি ফ্ল্যাঙ্ক সহ ফন্ট-ফ্যানের সাথে পৃথক গ্লিফগুলি উপস্থাপন করতে পারেন এবং এটি শূন্য কিনা তা দেখার জন্য তাদের প্রস্থকে পরিমাপ করতে পারেন, কিন্তু আপনাকে প্রতিটি গ্লিফকে পূর্ণাঙ্গভাবে পুনরাবৃত্ত করতে হবে আপনি পরীক্ষা করতে চেয়েছিলেন এমন প্রত্যেকটি ফন্ট , কিন্তু আপনি ফন্টের উপাদানগুলি ফন্টের স্ট্যাকের মধ্যে জানতে পারেন তবে ব্যবহারকারীর ব্রাউজারটি আপনার ব্যবহারকারীদের কমপক্ষে কিছু ব্যবহারকারীর জন্য কীভাবে ফন্ট ব্যবহার করা হয় তা জানার কোন উপায় নেই। আপনার দ্বারা পুনরাবৃত্তি করা ফন্টের তালিকা অসম্পূর্ণ হবে। (নতুন ফন্ট বের হয়ে আসার এবং এটি ব্যবহার শুরু করার ক্ষেত্রে এটি ভবিষ্যৎ প্রমাণও নয়।)

0
যোগ

A technique that works is to look at the computed style of the element. This is supported in Opera and Firefox (and I recon in safari, but haven't tested). IE (7 at least), provides a method to get a style, but it seems to be whatever was in the stylesheet, not the computed style. More details on quirksmode: Get Styles

এখানে একটি উপাদান ব্যবহৃত ফন্ট গ্রাস একটি সহজ ফাংশন:

/**
 * Get the font used for a given element
 * @argument {HTMLElement} the element to check font for
 * @returns {string} The name of the used font or null if font could not be detected
 */
function getFontForElement(ele) {
    if (ele.currentStyle) { // sort of, but not really, works in IE
        return ele.currentStyle["fontFamily"];
    } else if (document.defaultView) { // works in Opera and FF
        return document.defaultView.getComputedStyle(ele,null).getPropertyValue("font-family");
    } else {
        return null;
    }
}

যদি এই জন্য সিএসএস নিয়ম ছিল:

#fonttester {
    font-family: sans-serif, arial, helvetica;
}

তারপর যদি এটি ইনস্টল করা হয় তাহলে হ্যালোস্টিকাটি ফেরত দিতে হবে, যদি না, এরিয়াল এবং সর্বশেষে, সিস্টেমের ডিফল্ট সানসিরফ ফন্টের নামটি। লক্ষ্য করুন যে আপনার CSS ঘোষণায় ফন্টের ক্রমটি উল্লেখযোগ্য।

একটি আকর্ষণীয় হ্যাক যা আপনি চেষ্টা করতে পারেন বিভিন্ন ফন্টের সাথে অনেকগুলি লুকানো উপাদান তৈরি করতে, যা কোনও ফন্টটি একটি মেশিনে ইনস্টল করা আছে তা সনাক্ত করার চেষ্টা করে। আমি নিশ্চিত যে কেউ এই কৌশল সঙ্গে একটি নিফটি ফন্ট পরিসংখ্যান সংগ্রহস্থল পাতা করতে পারে।

0
যোগ
এটি CSS এর সম্পূর্ণ স্ট্রিংটি যেমন "হেল্লুটিিকা, এরিয়েল, সান-সেরিফ" ফেরত দেয়। এটি প্রকৃত ফন্ট ব্যবহৃত হচ্ছে না।
যোগ লেখক Tom Kincaid, উৎস

@pat প্রকৃতপক্ষে, Safari ফন্ট ব্যবহার করে না, Safari এর পরিবর্তে স্ট্যাকের প্রথম ফন্টটি ফেরত দেয় না, তা না থাকলেও এটি আমার ইনস্টলেশনের ক্ষেত্রে কমবে।

font-family: "my fake font", helvetica, san-serif;

হেল্লেটিকা ​​অনুমান করা একটি ইনস্টল / ব্যবহার করা হয়, আপনি পাবেন:

  • সাফারিে "আমার জাল ফন্ট" (এবং আমি অন্য ওয়েবকিট ব্রাউজারকে বিশ্বাস করি)।
  • Gecko ব্রাউজার এবং IE এ "আমার জাল ফন্ট, হেভেল্টিকা, সান-সেরিফ" করুন
  • অপেরা 9 এর "হ্যালোলেটিকা", যদিও আমি পড়ি যে তারা অপেরা 10 এ এটি পরিবর্তন করতে চায় গেকো।
  • আপনি

আমি এই সমস্যার একটি পাস গ্রহণ এবং ফন্ট Unstack তৈরি, একটি স্ট্যাক প্রতিটি ফন্ট পরীক্ষা করে এবং শুধুমাত্র ইনস্টল করা এক ফিরে শুধুমাত্র ফিরে। এটি এমন একটি ট্রিক ব্যবহার করে যে @ মোজোফিল্টার উল্লেখ করে, তবে একাধিক ইনস্টল থাকলে শুধুমাত্র প্রথমটি ফেরত দেয়। যদিও এটি @ টালাবিনসন উল্লেখ করে দুর্বলতা থেকে বেঁচে থাকে (উইন্ডোজ হেল্ভেটিকাতে চুপটি আহারের জন্য আলি বদল করে এবং হেল্লেটিিকা ইনস্টল করা রিপোর্ট করে), এটি অন্যথায় ভাল কাজ করে।

ফন্টউইনস্ট্যাক

0
যোগ

একটি সরলীকৃত ফর্ম হল:

function getFont() {
    return document.getElementById('header').style.font;
}

আপনি যদি আরো কিছু কিছু প্রয়োজন, এই আউট চেক করুন ।

0
যোগ

একটি সহজ সমাধান আছে

function getUserBrowsersFont() 
{
    var browserHeader = document.getElementById('header');
    return browserHeader.style.font;
}

এই ফাংশন ঠিক আপনি কি চান তা হবে। এক্সিকিউশন এ এটি ব্যবহারকারী / দর্শক ব্রাউজার ফন্ট টাইপ ফিরে আসবে। আশা করি এটি সাহায্য করবে

0
যোগ
সবচেয়ে সম্ভবত কারণ হল এটি শুধুমাত্র একটি সেট ফন্টের জন্য পরীক্ষা করে, এবং যদি কোনও ফন্ট সেট না থাকে, এটি সম্ভবত এরিয়েলকে ফন্ট হিসাবে ব্যবহার করছে।
যোগ লেখক Josiah, উৎস
আমি Safari এ এই উপাদানটি চেষ্টা করছি যা স্পষ্টভাবে আরিয়াল ফন্ট আছে এবং আমি ফন্ট হিসাবে "" পেয়েছি। কেন হিসাবে কোনো ধারনা?
যোগ লেখক Alessandro Vermeulen, উৎস

আরেকটি সমাধান ফন্ট স্বয়ংক্রিয়ভাবে @ ফন্ট-মুখ দ্বারা ইনস্টল করতে হবে যা সনাক্তকরণের জন্য প্রয়োজনীয়তা প্রত্যাখ্যান করতে পারে।

@font-face { 
font-family: "Calibri"; 
src: url("http://www.yourwebsite.com/fonts/Calibri.eot"); 
src: local("Calibri"), url("http://www.yourwebsite.com/fonts/Calibri.ttf") format("truetype");
}

Of course it wouldn't solve any copyright issues, however you could always use a freeware font or even make your own font. You will need both .eot & .ttf files to work best.

0
যোগ

ক্যালিব্রি মাইক্রোসফ্টের মালিকানাধীন একটি ফন্ট, এবং বিনামূল্যে বিতরণ করা উচিত নয়। এছাড়াও, একটি নির্দিষ্ট ফন্ট ডাউনলোড করার জন্য একটি ব্যবহারকারীকে খুব ব্যবহারকারী-বন্ধুত্বপূর্ণ নয়।

আমি ফন্টের জন্য একটি লাইসেন্স কেনার সুপারিশ করব এবং আপনার অ্যাপ্লিকেশনে এটি এম্বেড করব।

0
যোগ
কিছু কিনতে আগে আমি অনুরূপ কিছু জন্য Google ফন্ট চেক সুপারিশ করবে।
যোগ লেখক OJFord, উৎস
ফন্ট এম্বেডিং জন্য +1। এই কিছু সনাক্ত করতে না করেই সমস্যাটি সমাধান করে
যোগ লেখক Andrew Grothe, উৎস
ব্যতীত, যদি, ব্যবহারকারী একটি উইন্ডো মেশিনে থাকে তাহলে তারা Calibri দেখতে পারেন। এই fallback তালিকা সমগ্র পয়েন্ট
যোগ লেখক dudewad, উৎস
এবং আপনার উত্তর প্রশ্ন সম্পর্কিত নয়, এবং একটি মন্তব্য করা উচিত।
যোগ লেখক dudewad, উৎস