ওয়েব পৃষ্ঠায় কোনটি নির্ধারিত ফন্ট ব্যবহার করা হয়েছিল তা কীভাবে সনাক্ত করবেন?

Question

ধরুন আমার পৃষ্ঠায় আমার নীচের সিএসএস বিধি রয়েছে:

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

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

আমি কেন এটি করতে চাই তা ভেবে লোকদের জন্য সম্পাদনা করুন: আমি যে ফন্টটি সন্ধান করছি তাতে এমন গ্লাইফ রয়েছে যা অন্য ফন্টে পাওয়া যায় না এবং যখন ব্যবহারকারীটির ফন্ট না থাকে আমি ব্যবহারকারীকে সেই ফন্টটি ডাউনলোড করতে বলার জন্য একটি লিঙ্ক প্রদর্শন করতে চাই যাতে তারা সঠিক ওয়েব ফন্টের সাহায্যে আমার ওয়েব অ্যাপ্লিকেশনটি ব্যবহার করতে পারেন।

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

Comments

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

— tlrobinson

সাবধানতা একটি ছোট নোট: আপনি Calibri ডাউনলোড করতে একটি লিঙ্কের প্রস্তাব করা হয়, তাহলে জেনে রাখুন যে যদিও এটা বিভিন্ন Microsoft পণ্যগুলির মধ্যে একত্রিত করা হয়, এটা হতে পারে না একটি বিনামূল্যে ফন্ট, এবং আপনি ডাউনলোডের জন্য এটি প্রদানের মাধ্যমে কপিরাইট ভঙ্গ করছে।

— অ্যাডাম হেপটন

Answer 1

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

এটি এখান থেকে এসেছে: জাভাস্ক্রিপ্ট / সিএসএস হরফ ফন্ট সনাক্তকারী (ajaxian.com; 12 মার্চ 2007)

Comments

আরেকটি পন্থা ব্যবহার measureTextথেকে canvasউপাদান: github.com/Wildhoney/DetectFont

— Wildhoney

Answer 2

আমি একটি সাধারণ জাভাস্ক্রিপ্ট সরঞ্জাম লিখেছিলাম যা আপনি এটি ব্যবহার করতে পারেন কোনও ফন্ট ইনস্টল করা আছে কিনা তা যাচাই করতে।
এটি সাধারণ কৌশল ব্যবহার করে এবং বেশিরভাগ সময় সঠিক হওয়া উচিত।

jFont যাচাইকারী GitHub উপর

Comments

হরফ সনাক্তকরণ সমস্যার সমাধান করে না। আপনি ঘোষিত ফন্টগুলি ভাবার জন্য এটি ব্যবহার করতে পারেন এবং কোনটি বৈধ তা যাচাই করতে পারেন তবে এটি কোনও ডিভের জন্য কোন ফন্ট ব্যবহার করা হবে সে সম্পর্কে খুব কম বা কোনও তথ্য দেয়। আপনি যদি জেএস থেকে ডিভ তৈরি করেন তবে কীভাবে আমরা জানতে পারি কোন ফন্টটি ব্যবহৃত হয়?

— জন লেনার্ট আসেনডেন

@ জোনলনার্টএসেনডেন ব্যবহৃত ফন্টটি পেতে আমি বিশ্বাস করি আপনি "কম্পিউটেড স্টাইল" সম্পত্তিটি ব্যবহার করতে পারবেন (সঠিক নামটি আমি ভুলে গেছি তবে এটি এরকমই কিছু))

— ডেরেক 會 功夫 功夫

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

— জন লেনার্ট আসেনডেন

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

— ব্র্যান্ডন এলিয়ট

Answer 3

@ পেটটি আসলে, সাফারি ব্যবহার করা ফন্টটি দেয় না, তার পরিবর্তে সাফারি সর্বদা স্ট্যাকের মধ্যে প্রথম ফন্টটি ইনস্টল করা হয়েছে কিনা তা বিবেচনা না করে কমপক্ষে আমার অভিজ্ঞতায় ফিরিয়ে দেয়।

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

ধরে নেওয়া হেলভেটিকা ​​হ'ল ইনস্টল করা / ব্যবহৃত, আপনি পাবেন:

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

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

Answer 4

যে কৌশলটি কাজ করে তা হ'ল উপাদানটির গণিত শৈলী। এটি অপেরা এবং ফায়ারফক্সে সমর্থিত (এবং আমি সাফারি পুনরায় সংযুক্ত করেছি, তবে পরীক্ষা করিনি)। আইই (কমপক্ষে,), স্টাইল পাওয়ার জন্য একটি পদ্ধতি সরবরাহ করে তবে মনে হয় এটি স্টাইলশিটে যা ছিল তা গণিত শৈলীতে নয়। Quirksmode সম্পর্কে আরও বিশদ: স্টাইলগুলি পান

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

/**
 * 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;
}

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

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

Comments

এটি "হেলভেটিকা, আড়িয়াল, সানস-সেরিফ" এর মতো সিএসএসের সম্পূর্ণ স্ট্রিং প্রদান করে। এটি আসল ফন্ট ব্যবহার হচ্ছে না।

— টম কিনকেড 18

Answer 5

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

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

আপনি আরো সম্পূর্ণ কিছু প্রয়োজন হয়, তাহলে পরীক্ষা এই বাইরে।

Answer 6

একটি সহজ সমাধান আছে - কেবল ব্যবহার করুন element.style.font:

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

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

Comments

আমি সাফারিতে এমন একটি উপাদান নিয়ে চেষ্টা করছি যা স্পষ্টভাবে আড়িয়াল ফন্ট রয়েছে এবং আমি ফন্ট হিসাবে "" পাচ্ছি। কেন হিসাবে কোনো ধারনা?

— আলেসান্দ্রো ভার্মিউলেন

সর্বাধিক সম্ভাব্য কারণটি হ'ল এটি কেবল একটি সেট ফন্টের জন্য পরীক্ষা করে এবং যদি কোনও ফন্ট সেট না থাকে তবে এটি সম্ভবত আরিয়ালটিকে হরফ হিসাবে ব্যবহার করছে।

— জোশিয়ার

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

— brennanyoung

আমি দুঃখিত, তবে আমি মনে করি না এটি সঠিক উত্তর। এটি সিএসএসের সম্পত্তিটির মান ছাপানোর সময়, এটি ব্রাউজার দ্বারা ব্যবহৃত প্রকৃত রেন্ডার ফন্টটি ফিরিয়ে দেয় না ।

— গোজুন

Answer 7

আর একটি সমাধান @font-faceহ'ল ফন্টটি স্বয়ংক্রিয়ভাবে ইনস্টল করা হবে যার মাধ্যমে সনাক্তকরণের প্রয়োজনটিকে উপেক্ষা করতে পারে।

@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");
}

অবশ্যই এটি কোনও কপিরাইট সমস্যা সমাধান করবে না, তবে আপনি সর্বদা একটি ফ্রিওয়্যার ফন্ট ব্যবহার করতে বা এমনকি নিজের ফন্ট তৈরি করতে পারেন। আপনি উভয় প্রয়োজন হবে .eot& .ttfসেরা কাজ ফাইল।

Answer 8

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

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

Comments

ফন্ট এম্বেডিংয়ের জন্য +1। এটি কিছুই সনাক্ত না করেই সমস্যার সমাধান করে।

— অ্যান্ড্রু গ্রোথ

আমি কিছু কেনার আগে অনুরূপ কিছু জন্য Google ফন্ট পরীক্ষা করার পরামর্শ দেব would

— ওজেফোর্ড

ব্যবহারকারীরা যদি উইন্ডোজ মেশিনে থাকে তবে তারা ক্যালিব্রি দেখতে পারবেন cept এটি ফ্যালব্যাক তালিকার সম্পূর্ণ পয়েন্ট।

— দুদেওয়াদ

এবং আপনার উত্তর প্রশ্নের সাথে সম্পর্কিত নয়, এবং একটি মন্তব্য হওয়া উচিত।

— দোয়াদওয়াদ

Answer 9

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

https://fount.artequalswork.com/

Answer 10

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

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

এটি আপনি যা চান ঠিক তা করে ...

Answer 11

আপনি অ্যাডোব ফাঁকা রাখতে পারেন যে ফন্টটি দেখতে চান তার পরে আপনি ফন্ট-পরিবারে রাখতে পারেন এবং তারপরে সেই ফন্টে নেই এমন কোনও গ্লাইফ রেন্ডার হবে না।

উদাহরণ:

font-family: Arial, 'Adobe Blank';

যতদূর আমি অবগত রয়েছি যে কোন উপাদানটির কোন গালিফগুলি সেই উপাদানটির জন্য ফন্টের স্ট্যাকটিতে কোন ফন্টের দ্বারা রেন্ডার করা হচ্ছে তা বলার মতো কোনও জেএস পদ্ধতি নেই।

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

ব্যবহারকারীর সিস্টেম এটির জন্য যেমন ভূমিকা নিতে পারে যেমন উইন্ডো গ্লিফ স্তরে ফন্ট সাবস্টিটিউশন করে।

তাই ...

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

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