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




হাইপার লিঙ্ক কাকে বলে (9)

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

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

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

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

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


কাজ করে একটি কৌশল উপাদান গণিত শৈলী তাকান হয়। এটি অপেরা এবং ফায়ারফক্সে সমর্থিত (এবং আমি Safari মধ্যে পুনর্নবীকরণ, কিন্তু পরীক্ষিত না)। IE (অন্তত 7 টি), একটি স্টাইল পেতে একটি পদ্ধতি সরবরাহ করে, তবে স্টাইলশীটে যা ছিল তা মনে হয়, গণিত শৈলী নয়। 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;
}

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

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


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

উদাহরণ:

font-family: Arial, 'Adobe Blank';

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

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

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

তাই ...

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

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


আমি একটি সহজ জাভাস্ক্রিপ্ট টুল লিখেছিলাম যা আপনি ফন্ট ইন্সটল কিনা তা পরীক্ষা করতে ব্যবহার করতে পারেন।
এটি সহজ কৌশল ব্যবহার করে এবং অধিকাংশ সময় সঠিক হতে হবে।

github উপর jFont পরীক্ষক


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

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


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

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

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


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

https://fount.artequalswork.com/


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

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

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


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

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


@pat প্রকৃতপক্ষে, সাফারি ব্যবহৃত ফন্টটি দেয় না, সাফারি পরিবর্তে এটি সর্বদা আমার অভিজ্ঞতার মধ্যে থাকা সত্ত্বেও স্ট্যাকের প্রথম ফন্টটি প্রদান করে।

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

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

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

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





fonts