ফায়ারফক্স ফন্ট আশ্চর্য ওয়েবফন্ট সেট থেকে আইকনগুলি রেন্ডার করতে পারে না

Question

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

এটি কীভাবে Chrome (উইন্ডোজ 7), সাফারি (ম্যাক ওএস এক্স) এবং স্টেইনলেস (ম্যাক ওএস এক্স) এ প্রদর্শিত হবে:

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

রেফারেন্সের জন্য, সিএসএস যা এই ফন্টটি সেট করে (ফায়ারফক্স দ্বারা সঠিকভাবে প্রক্রিয়াজাত করা হয় না):

@font-face
{
  font-family:'FontAwesome';
  src:url('./fontawesome-webfont.eot');
  src:url('./fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
      url('./fontawesome-webfont.woff') format('woff'),
      url('./fontawesome-webfont.ttf') format('truetype'),
      url('./fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight:normal;
  font-style:normal
}

[class^="icon-"]:before,
[class*=" icon-"]:before
{
  font-family:FontAwesome;
  font-weight:normal;
  font-style:normal;
  display:inline-block;
  text-decoration:inherit
}

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

Comments

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

— এডিটিসি

আমি @ এডটিসিকে বন্ধ করতে ভোট দিচ্ছি কারণ খানকাদেমি সঠিকভাবে তাদের সাইটের সামঞ্জস্যতা নিয়ে গবেষণা করছেন না এবং এখানে সমাধান করা যায় এমন কোনও প্রশ্ন নয়।

— জেমস মার্টজ

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

— এডিটিসি

আমি এখানে বোঝার অভাবের সাথে অহংকার নিয়ে হতাশ। সমস্যাগুলি হ'ল ফন্ট ফটোগুলির জন্য যে কোনও সময় ফন্ট ফাইলের জন্য অনুরোধ ক্রস-ডোমেন হওয়ায় ফন্ট আশ্চর্য ফায়ারফক্সে ব্যর্থ হবে। স্ট্যাটিক ফাইল বিতরণ করতে কোনও সিডিএন ব্যবহার করে এমন কোনও সাইটের অন্য কথায় on

— জেসনর

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

— এডিটিসি

Answer 1

সমস্যা প্রশ্নে বর্ণিত থেকে সব পাথ পরিবর্তন করে খান একাডেমী দ্বারা নির্ধারিত হয় ./থেকে /fonts/(উদাহরণস্বরূপ ./fontawesome-webfont.ttfপরিবর্তনের /fonts/fontawesome-webfont.ttf)। আমার কাছে মনে হয় ফায়ারফক্স বিশেষ "ডট" ডিরেক্টরি থেকে ফাইল পড়তে অক্ষম (যা কেবল বর্তমান ডিরেক্টরিকে বোঝায়)।

পিএস: শেষ বৈশিষ্ট্যের পরে সিএসএসে সেমিকোলনের অভাব এই সমস্যা তৈরি করে না ।

অতিরিক্ত মন্তব্যগুলি:

.উপসর্গ সম্পর্কে আপনার সম্পাদনাটি একটি সার্ভার সমস্যা, ফায়ারফক্স কীভাবে ফাইল পরিচালনা করে। কেএ ভুল অবস্থান থেকে ফন্ট ফাইলগুলি উল্লেখ করছে - এলোমেলো

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

Comments

প্রশ্নের উত্তর নীচে মন্তব্য প্রবাহে সত্যের অনুরোধ অনুসারে এই উত্তরটি তৈরি করা হয়েছিল ।

— এডিটিসি

মনে রাখবেন যে এই ফায়ারফক্স সমস্যাটি শুরু হওয়া পথগুলিকেও প্রভাবিত করে ../।

— বেন

Answer 2

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

ফায়ারফক্স একটি ভিন্ন (উপ-) ডোমেনে থাকা একটি ফন্টের ব্যবহারকে অবরুদ্ধ করে

সেই পোস্টগুলিতে মন্তব্যগুলি পড়ুন, তারা ভাল পরামর্শ দেয়।

Answer 3

আই, ফায়ারফক্স এবং ক্রম সঠিকভাবে চালানোর জন্য আমি পথ পরিবর্তন করেছি: ( URL টি দেখতে )

@font-face{
  font-family:'FontAwesome';
  src:url('ogi/bete/font/fontawesome-webfont.eot?v=3.0.1');
  src:url('/ogi/bete/font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'), 
  url('/ogi/bete/font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
  url('ogi/bete/font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight:normal;
  font-style:normal }