সিএসএস @ ফন্ট-ফেস ফায়ারফক্সের সাথে কাজ করছে না, তবে ক্রোম এবং আইইয়ের সাথে কাজ করছে

194

নীচের কোডগুলি গুগল ক্রোম বিটা পাশাপাশি আই 7.. তেও কাজ করে However আমার সিএসএস ফাইলগুলি কীভাবে অন্তর্ভুক্ত করা হয়েছে এটি একটি সমস্যা হিসাবে সন্দেহ হচ্ছে, কারণ আমি জানি যে ফায়ারফক্স ক্রস-ডোমেন আমদানি সম্পর্কে খুব বন্ধুত্বপূর্ণ নয়।

তবে এটি কেবল স্থির এইচটিএমএল এবং ক্রস-ডোমেন নিয়ে কোনও প্রশ্নই আসে না।

আমার অবতরণ-পৃষ্ঠায় এইচটিএমএল এ আমি একটি সিএসএস আমদানি করি:

<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, projection" />

মেইন সিএসএসের মধ্যে আমার মতো আরও একটি আমদানি রয়েছে:

@import url("reset.css");
@import url("style.css");
@import url("type.css");

এবং টাইপ.এসএস এর মধ্যে আমার নিম্নলিখিত ঘোষণা রয়েছে:

@font-face {
    font-family: "DroidSerif Regular";
        src: url("font/droidserif-regular-webfont.eot");
        src: local("DroidSerif Regular"), 
                url("font/droidserif-regular-webfont.woff") format("woff"), 
                url("font/droidserif-regular-webfont.ttf")     format("truetype"), 
                url("font/droidserif-regular-webfont.svg#webfontpB9xBi8Q")     format("svg"); 
    font-weight: normal; font-style: normal; }
@font-face {
    font-family: "DroidSerif Bold";
    src: url("font/droidserif-bold-webfont.eot");
    src: local("DroidSerif Bold"), 
        url("font/droidserif-bold-webfont.woff") format("woff"), 
        url("font/droidserif-bold-webfont.ttf") format("truetype"), 
        url("font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal; font-style: normal; }

body { font-family: "DroidSerif Regular", serif; }
h1 { font-weight: bold; font-family: "DroidSerif Bold", serif; }

টাইপ.এসএসএস হিসাবে একই জায়গায় আমার কাছে "ফন্ট" নামে একটি ডিরেক্টরি রয়েছে। এই ফন্ট ডিরেক্টরিতে সমস্ত woff / ttf / svg ফাইল ইত্যাদি রয়েছে

আমি এই এক স্ট্যাম্পড। এটি ক্রোম এবং আইই তে কাজ করে তবে ফায়ারফক্সে নয় । এটা কিভাবে সম্ভব? আমি কী মিস করছি?

css  firefox  font-face  file-uri 
— কৌশিক গোপাল
সূত্র
2
আমি এই মুহুর্তে ফন্টসকিয়ারিল উত্পাদিত দিকনির্দেশ এবং ফন্টগুলির সাথে এই সঠিক সমস্যার মধ্যে চলেছি।
— জেসন
পরীক্ষার উদ্দেশ্যে আপনি <style>ট্যাগগুলির মধ্যে আপনার এইচটিএমএলটিতে @ ফন্ট-মুখের ঘোষণাগুলি যুক্ত করার চেষ্টা করতে পারেন এবং দেখতে পান যে আপনার একই সমস্যা আছে কিনা?
— ক্রিস_ও
URL ( 'Sans-Serif') বিন্যাস ( 'woff'): একটি একক কমা যোগ এই সমস্যাটি খুব মত সমাধান হতে পারে,
— Farzan Balkani

উত্তর:

234

স্থানীয়ভাবে সাইট চালানো ( file:///)

ফায়ারফক্স খুব কড়া "ফাইল ইউরি অরিজিন" ( file:///) ডিফল্টরূপে নীতি নিয়ে আসে : অন্যান্য ব্রাউজারের মতো আচরণ করতে about:config, নীচে পছন্দ অনুযায়ী ফিল্টার করে fileuriএবং টগল করতে:

security.fileuri.strict_origin_policy

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

প্রকাশিত সাইট

নীচে আমার মন্তব্য অনুসারে, এবং আপনি নিজের সাইট মোতায়েন করার পরে এই সমস্যাটি অনুভব করছেন, আপনি নিজের সমস্যা ক্রস ডোমেন ইস্যু হিসাবে কনফিগার করে কিনা তা দেখার জন্য আপনি একটি অতিরিক্ত শিরোনাম যুক্ত করার চেষ্টা করতে পারেন: এটি হওয়া উচিত নয়, যেহেতু আপনি আপেক্ষিক পাথ নির্দিষ্ট করে দিচ্ছেন, তবে আমি যাইহোক এটি চেষ্টা করবো: আপনার .htaccess ফাইলে, আপনি প্রতিটি .ttf / .otf / .eot ফাইলের জন্য একটি অতিরিক্ত শিরোনাম প্রেরণ করতে চান তা নির্দিষ্ট করুন:

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

সত্যি বলতে গেলে, আমি এটির কোনও পার্থক্য করার আশা করবো না, তবে এটি এত সহজ যে এটি চেষ্টা করার মতো: অন্যথায় আপনার ফন্টের টাইপফেসের জন্য বেস 64 টি এনকোডিং ব্যবহার করার চেষ্টা করুন, কুরুচিপূর্ণ তবে এটি খুব কার্যকরও হতে পারে।

একটি দুর্দান্ত পুনরুদ্ধার এখানে পাওয়া যায়

— ম্যানুয়েল
সূত্র
আপনি যদি স্থানীয়ভাবে কাজ না করে থাকেন তবে সম্ভবত এটির সমাধান হবে না তবে আপনি কোনও লাইভ সাইটে যে কোনও উপায়ে ".. /" / ফন্ট "এর পরিবর্তে" / রিসোর্স / ফন্ট "ব্যবহার করতে পারেন may হরফ ", তবে আমি থাম্বলার সম্পর্কে জানি না: আপনি যদি সাইটের url দিতে পারেন তবে আমি এটি দেখতে পারি।
— ম্যানুয়েল
হরফ ক্রোম, সাফারি, এমনকি তারা আই 6-তে ফিরে আসে ... তবে ফায়ার ফক্সে ফন্টের ঘোষণাটি ঠিক কাজ করে।
— জেসন
3
আহ আপনি কুখ্যাত ক্রস-ডোমেন সমস্যা সম্পর্কে কথা বলছেন: আপনি হয় একটি বেস 64 এনকোডিংয়ে আপনার ফন্টটি ব্যবহার করতে পারেন, বা ফন্টগুলি পরিবেশন করার সময় থাম্বলারকে একটি অতিরিক্ত "অ্যাক্সেস-কন্ট্রোল-অলজিন-অরিজিন" শিরোনাম যুক্ত করতে বলতে পারেন।
— ম্যানুয়েল
তাহলে ফায়ারফক্সের ক্রস ডোমেন নীতিটি কতটা হাস্যকরভাবে কঠোর? পছন্দ করুন, সিডিএন এবং সাইট একই ডোমেনটি ভাগ করে নিচ্ছে, কেবল আলাদা সাবডোমেন।
— জেসন
1
@ জেসন, অগোছালো bit৪ বিট এনকোডিং কি কাজ করে না? এটা আমার জন্য কাজ করেছে।
— কৌশিক গোপাল
42

আপনার .htaccess এ নিম্নলিখিতগুলি যুক্ত করার পাশাপাশি: (ধন্যবাদ @ ম্যানুয়েল)

<FilesMatch "\.(ttf|otf|eot)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

আপনি .htaccess ফাইলে ওয়েবফন্ট মাইম প্রকারগুলি স্পষ্টভাবে চেষ্টা করার চেষ্টা করতে পারেন ... এটির মতো:

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

শেষ পর্যন্ত, আমার .htaccess ফাইলটি দেখতে দেখতে (বিভাগটির জন্য যা ওয়েবফন্টগুলি সমস্ত ব্রাউজারে কাজ করতে সক্ষম করে)

# BEGIN REQUIRED FOR WEBFONTS

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

# END REQUIRED FOR WEBFONTS
— alademann
সূত্র
আমার জন্যও কাজ করেছেন। ধন্যবাদ জুলদি!
— জেমস
মোহন মত আমার জন্য কাজ! আপনাকে ধন্যবাদ
— Moxet জানুয়ারী
1
আমার জন্যও কৌশলটি করেছিলেন। আমাকে woff2 যুক্ত করতে হয়েছিল: অ্যাডটাইপ ফন্ট / woff2 .woff2
— হোমোস
17

আমারও এই সমস্যা হয়েছে আমি উত্তরটি এখানে পেয়েছি: http://www.dynamicdrive.com/forums/showthread.php?t=63628

এটি ফায়ারফক্সে কাজ করে এমন সমাধানের একটি উদাহরণ, আপনার ফন্টের মুখের CSS এ এই লাইনটি যুক্ত করতে হবে:

src: local(font name), url("font_name.ttf");
— ইসরাইলি
সূত্র
3
একটি ফেলে local('name')মধ্যে font-faceঘোষণা শুধু "লোড ফন্ট 'NAME' ব্যবহারকারীর কম্পিউটারে করার চেষ্টা করুন। যদি তা না পাওয়া যায়, webfont লোড করুন।" অর্থ ( MDN ডক্স দেখুন )। তবুও, আনন্দিত এটি আপনার পক্ষে কাজ করেছে! :)
— হেনরি
4
এটি "আপনার জন্য" কাজ করেছে কারণ আপনার কম্পিউটারে ফন্ট ইনস্টল করা আছে। অন্যান্য ব্যবহারকারীরা এটি দেখতে পাবেন না। আপনি ঠিক এটি আপনার জন্য স্থির করেছেন।
— হুগো ডেলসিং
4

আমি কেবল এটি এখানে রেখে যাব কারণ আমার সহকর্মী সম্পর্কিত "ফন্ট-ফায়ার ফায়ারফক্সে নয় অন্য কোথাও" সমস্যার সমাধান পেয়েছেন।

সমস্যাটি হ'ল ফায়ারফক্স হ'ল ফন্ট-পরিবার ঘোষণার সাথে জড়িয়ে গেল, এটি এটিকে ঠিক করেছিল:

body{ font-family:"MyFont" !important; }

PS: আমি এইচটিএমএল 5 বয়লারপ্লেটও ব্যবহার করছিলাম।

— ruyadorno
সূত্র
4

আমি একই সমস্যা ছিল। এইচ 1, এইচ 2 বা আপনি যে কোনও স্টাইল @ ফন্ট-ফেস রুল দিয়ে টার্গেট করছেন তার কোডটি ডাবল চেক করুন। আমি দেখতে পেলাম যে font-family: 'custom-font-family' Arial, Helvetica etcফায়ারফক্সের বাইরে প্রতিটি ব্রাউজারে এটি দুর্দান্ত দেখানোর পরে আমি কোমা অনুপস্থিত । আমি কোমা যুক্ত করেছি এবং এটি কাজ করেছে।

— tarquinwinot
সূত্র
4

আমার সত্যিকার অর্থে একই সমস্যা ছিল। আমাকে "ফন্ট" নামে একটি নতুন ফোল্ডার তৈরি করতে হয়েছিল এবং এটি ডাব্লুপি_ কনটেন্টে রাখতে হয়েছিল। আমি আমার ব্রাউজার থেকে এটি http://www.example.com/wp-content/fouts/CANDY.otf এর মতো অ্যাক্সেস করতে পারি

পূর্বে, ফন্ট ফোল্ডারটি আমার সিএসএস ফাইলের মতো একই ডিরেক্টরিতে ছিল এবং @ ফন্ট-মুখটি এমন দেখাচ্ছে:

@font-face { 
    font-family: CANDY;
    src: url("fonts/CANDY.otf");
}

আমি উপরে উল্লিখিত হিসাবে, এটি ফায়ারফক্সে কাজ করছে না কেবল ক্রোম দিয়ে। এখন এটি কাজ করছে কারণ আমি একটি নিখুঁত পথ ব্যবহার করেছি:

@font-face { 
    font-family: CANDY;
    src: url("http://www.example.com/wp-content/fonts/CANDY.otf");
}
— অক্টাভিয়ান ভ্লাদু
সূত্র
3

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

আমি সমাধানটি নীচের ঘোষণাটিকে .htaccess- এ যুক্ত করতে গিয়েছি

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

মাধ্যমে পাওয়া যায়

— davus
সূত্র
3

একটি সহজ সমাধান যা এখনও কেউ উল্লেখ করেনি তা হ'ল বেস 64 এনকোডিং ব্যবহার করে ফন্টটি সরাসরি সিএসএস ফাইলে এম্বেড করা।

আপনি যদি foutsquirrel.com ব্যবহার করছেন তবে ফন্ট-ফেস কিট জেনারেটরে বিশেষজ্ঞ মোড চয়ন করুন , নীচে স্ক্রোল করুন এবং সিএসএস বিকল্পের অধীনে বেস 6464 এনকোড নির্বাচন করুন - ডাউনলোড করা ফন্ট-কিট প্লাগ এবং খেলতে প্রস্তুত হবে।

এটিতে পৃষ্ঠা লোড সময় হ্রাস করার সামান্য সুবিধা রয়েছে কারণ এর জন্য আরও একটি কম http অনুরোধ প্রয়োজন।

— পিয়ের
সূত্র
2
বাছাইকৃত সমাধানের মন্তব্যে বেস 64৪ এনকোড সমাধানের কথা উল্লেখ করা হয়েছে।
— কৌশিক গোপাল
@ কৌশিকগোপাল আমার মনে হয় পোস্টটি পোস্ট করার পরে উত্তরটি অবশ্যই সম্পাদিত হয়েছিল।
— পিয়েরে
3

আমি উল্লেখ করব যে কিছু ফন্টের ফায়ারফক্সে সমস্যা আছে যদি তাদের ফাইলের নামটিতে নির্দিষ্ট অক্ষর থাকে। আমি সম্প্রতি 'মডুলাস' ফন্টটি নিয়ে একটি ইস্যুটি চালিয়েছি যার ফাইল নাম '237D7B_0_0' ছিল। ফাইলনামে আন্ডারস্কোরগুলি সরিয়ে নতুন ফাইলের সাথে মেলে সিএসএস আপডেট করা এই সমস্যার সমাধান করে। অনুরূপ অক্ষরযুক্ত অন্যান্য ফন্টগুলির সমস্যাটি খুব কৌতূহলযুক্ত না ... সম্ভবত ফায়ারফক্সে একটি বাগ রয়েছে। আমি ফাইলের নামগুলি কেবলমাত্র বর্ণানুক্রমিক অক্ষরে রাখার পরামর্শ দিই।

— niall.campbell
সূত্র
এই. মাইফোনটস.কম তাদের ফন্ট ফাইলগুলির নাম এইভাবে ছড়িয়ে দেয় এবং এর ফলে ফায়ারফক্স 35 বিচিত্র উপায়ে 35 রেন্ডারিংয়ের ফলাফল দেয়। হরফের নামকরণ সমস্যার সমাধান করেছে solved
— পূর্ববর্তী
2

বিশেষত এই ফন্টটির জন্য আপনার Google ফন্ট এপিআই ব্যবহার করা উচিত:

http://code.google.com/webfonts/family?family=Droid+Sans

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

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

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

— ক্যাসি
সূত্র
আসলে আপনার এটির জন্য Google ফন্ট এপিআই ব্যবহার করা উচিত নয়। ফায়ারফক্সে একটি সমস্যা রয়েছে যা আপনার ফন্টটি স্থানীয়ভাবে ইনস্টল করা থাকলে ব্যবহার করতে হরফের ভেরিয়েন্টগুলি (ইতালি, সাহসী ইত্যাদি) বাধা দেয়। আমি কেবল এই পথটির সন্ধান পেয়েছি হ'ল স্মাইলি সহ স্থানীয় এসআরসি ঘোষণাকে অসম্পূর্ণ করা (অবশ্যই, কোনও অদ্ভুত চরিত্র (গুলি) করবে, এটি ঠিক তাই ... খুশি)।
— জেসন
বাগের প্রতিবেদনের লিঙ্কটি এখানে: কোড. google.com/p/googlefontdirectory/issues/detail?id=13
— জেসন
2

আপনার @font-faceনির্দেশিকায় স্থানীয় উত্স ঘোষণাকে অপূর্ণ করার চেষ্টা করুন ।

ফায়ারফক্স বা গুগল ফন্ট এপিআই-তে একটি পরিচিত বাগ রয়েছে যা ফন্ট স্থানীয়ভাবে ইনস্টল করা থাকলে ফন্টের বিভিন্ন রূপগুলি প্রতিরোধ করে এবং সংজ্ঞায়িত স্থানীয় নামের সাথে মেলে:

http://code.google.com/p/googlefontdirectory/issues/detail?id=13

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

http://paulirish.com/2010/font-face-gotchas/#smiley

— জেসন
সূত্র
আমি জানতাম না যে আমি একটি নতুন বুলেট পদ্ধতি নিয়ে এসেছি, এটি চেষ্টা করে দেখতে হবে এবং এটি আমার এফএফ ফন্ট-মুখ সমস্যাগুলি সমাধান করে কিনা।
— কৌশিক গোপাল
[আপডেট: সহায়ক থাকা সত্ত্বেও, এটি সমস্যার সমাধান করে না] .আমি সঠিক সমাধানের দিকে ইঙ্গিত করেছি।
— কৌশিক গোপাল
1

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

অন্যথায়, এটি সম্ভবত এমন কোনও URL- এ নির্দেশ করতে সহায়তা করবে যেখানে সমস্যা দেখা দেয়।

এছাড়াও, আমি কোনও সিএসএস সিনট্যাক্স ত্রুটি বা অন্যান্য ত্রুটিগুলি রিপোর্ট করা আছে কিনা তা দেখতে ফায়ারফক্স ত্রুটি কনসোলটি দেখার পরামর্শ দিই।

এছাড়াও, আমি নোট করব যে আপনি সম্ভবত ফন্ট-ওজন চান: দ্বিতীয় @ ফন্ট-মুখের নিয়মে গা in়।

— ডেভিড ব্যারন
সূত্র
হুম .. হ্যাঁ ডেভিড, আমি স্থানীয়ভাবে এটি চালাচ্ছি বলে মনে হয় তবে আমার আগে এটির একই ডিরেক্টরি সহ একটি উপ-ডিরেক্টরি ছিল। সুতরাং আমার টাইপ.এসএস মূল ফোল্ডারে এবং একই জায়গার মধ্যে হরফ ফোল্ডারটি। সুতরাং typ.css এবং হরফ ফোল্ডার একই ডিরেক্টরিতে রয়েছে। নিরাপদ দিকে থাকতে, আমি এটি ডিরেক্টরি থেকে এটি সরিয়ে এবং সরাসরি ফন্টগুলি রাখার চেষ্টা করেছি। এটি এখনও ফায়ার ফক্সে কাজ করে না।
— কৌশিক গোপাল
আমি এখন এটি দুটির মধ্যে একটি অনুভব করতে শুরু করেছি: 1) আমার কোডিংয়ে কিছু ভুল, যদি কেউ উপরের কোড থেকে কিছু স্পট করে তবে দয়া করে এটি উল্লেখ করার জন্য দয়া করুন। 2) এফএফ @ ফন্ট-মুখ এবং একাধিক ফাইল আমদানি সুন্দরভাবে বিবেচনা করে না? আমি মেইন.এসএসএস ব্যবহার করি যা অন্তর্ভুক্তভাবে আমদানি করে আমদানি টাইপ.কমের ফন্টের সাথে ফোল্ডারের লিঙ্ক রয়েছে? কোন হালকা লোক? @ ডেভিড ফন্ট-ওজন ধরা জন্য বিটিডব্লু ধন্যবাদ!
— কৌশিক গোপাল
ফায়ারফক্স একাধিক আমদানি ঠিক জরিমানা করে। আপনি কি সংস্করণ ব্যবহার করছেন? ফায়ারব্যাগ ব্যবহার করে কোডটি ডিবাগ করুন; নির্মূল প্রক্রিয়া ব্যবহার করুন। স্থানীয়ভাবে কাজ করা এমন সমস্যাগুলির পরিচয় দেয় যা দূর থেকে দূর হতে পারে। এভাবেই আপনি ডিবাগ!
— কেসি
"ক্রস-ডোমেন নিয়মের জন্য বিভিন্ন ডিরেক্টরিতে থাকা ফাইলগুলিকে বিভিন্ন ডোমেন হিসাবে বিবেচনা করা হয়" - না, তারা তা নয়।
— মাইক চেম্বারলাইন
1

যখন আমি এই সমস্যার মুখোমুখি হই তখন একটি .htaccess অ্যাক্সেস কন্ট্রোলকে মঞ্জুরি দেওয়ার অনুমতি দিন ব্যবহার করা আমার পক্ষে কার্যকর হয়নি।

পরিবর্তে, আইআইএস-এ ওয়েবকনফাইগটিতে সিস্টেমটি weোকান we ওয়েবে সার্ভার ব্লক নীচে দেখানো হয়েছে।

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>

এটি আমার জন্য কবজির মতো কাজ করেছিল। আপনার যদি নির্দিষ্ট ডোমেনে অ্যাক্সেস সীমাবদ্ধ করতে হয় তবে ডোমেনটির সাথে * প্রতিস্থাপন করুন।

— Bort
সূত্র
1

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

B E F O R E:
   @font-face
{   font-family: "GrilledCheese BTN";
    src: url(fonts/grilcb__.ttf);
}

A F T E R:
@font-face
{   font-family: "GrilledCheese BTN";
    src: url(/fonts/grilcb__.ttf);
}

ইউআরএলে 'ফন্ট' এর আগে নেতৃস্থানীয় স্ল্যাশ লক্ষ্য করুন? এটি ব্রাউজারকে মূল ডিরেক্টরি থেকে শুরু করতে এবং তারপরে সংস্থানটি অ্যাক্সেস করতে বলে। কমপক্ষে আমার জন্য - সমস্যা সমাধান হয়েছে।

— WebFixItMan
সূত্র
1

আপনি যদি বাহ্যিক ফন্টগুলি আমদানি করার চেষ্টা করছেন তবে আপনার ফায়ারফক্স এবং অন্যান্য ব্রাউজারের মধ্যে একটি সাধারণ সমস্যার মুখোমুখি। কিছু সময় আপনার ফন্ট গুগল ক্রোম বা অন্য একটি ব্রাউজারে ভাল কাজ করে তবে প্রতিটি ব্রাউজারে নয়।

এই ধরণের ত্রুটির অনেক কারণ রয়েছে এই সমস্যার পিছনে অন্যতম বড় কারণ হ'ল পূর্ববর্তী সংজ্ঞায়িত ফন্ট। আপনার সিএসএস কোডের প্রতিটি লাইন শেষ হওয়ার পরে গুরুত্বপূর্ণ কীওয়ার্ডটি যুক্ত করতে হবে:

উদাহরণ:

@font-face
{
    font-family:"Hacen Saudi Arabia" !important;
    src:url("../font/Hacen_Saudi_Arabia.eot?") format("eot") !important;
    src:url("../font/Hacen_Saudi_Arabia.woff") format("woff") !important;
    src: url("../font/Hacen_Saudi_Arabia.ttf") format("truetype") !important;
    src:url("../font/Hacen_Saudi_Arabia.svg#HacenSaudiArabia") format("svg") !important;
}
.sample
{
    font-family:"Hacen Saudi Arabia" !important;
}

বর্ণনা: আপনার সিএসএস ফাইল বা কোডে উপরের কোডটি এখানে প্রবেশ করুন। উপরের উদাহরণে "হ্যাসেন সৌদি আরব" আপনার ফন্ট-পরিবারের সাথে প্রতিস্থাপন করুন এবং আপনার ফন্ট ডিরেক্টরি অনুসারে ইউআরএল প্রতিস্থাপন করুন।

যদি আপনি প্রবেশ করেন! আপনার সিএসএস কোড ব্রাউজারে গুরুত্বপূর্ণ আপনি স্বয়ংক্রিয়ভাবে এই বিভাগটিতে ফোকাস করুন এবং পূর্বে ব্যবহৃত সম্পত্তিটিকে ওভাররাইড করুন। আরও বিশদ জানতে এখানে যান: https://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html

— গণেশ গারাদ
সূত্র
0

404 পেলে আপনি কি ফায়ারব্যাগ দিয়ে পরীক্ষা করতে পারেন? পাসে আমার সমস্যা ছিল এবং আমি দেখতে পেলাম যে এক্সটেনশানটি একই ছিল তবে লিনাক্স ফাইল.টিটিএফ ফাইল.টিটিএফ থেকে আলাদা ... এবং এটি ফায়ারফক্স ছাড়া সমস্ত ব্রাউজারের সাথে কাজ করে।

আশা করি এটি সাহায্য করে!

— ipalaus
সূত্র
1
আমি দৃ strongly়ভাবে সন্দেহ করি যে এটি কেবল একটি ব্রাউজারে 404'র হবে অন্যদের নয়।
— জেসন
@ জেসন ওয়ান ব্রাউজার অন্যর চেয়ে আলাদা ফাইল টাইপ ব্যবহার করতে পারে। :)
— ipalaus
ঠিক আছে, যে ক্ষেত্রে আমি এই সমস্যাটিতে এসেছি, আমি 100% বলতে পারি যে ফায়ারব্যাগের নেট প্যানেল এটি সফলভাবে ফন্টটি লোড করে দেখায়।
— জেসন
0

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

এটি ব্যবহার করে দেখুন:

@font-face {
    font-family: "DroidSerif Regular";
    src: url("/font/droidserif-regular-webfont.eot");
    src: local("DroidSerif Regular"), url("/font/droidserif-regular-webfont.woff") format("woff"), url("/font/droidserif-regular-webfont.ttf") format("truetype"), url("/font/droidserif-regular-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "DroidSerif Bold";
    src: url("/font/droidserif-bold-webfont.eot");
    src: local("DroidSerif Bold"), url("/font/droidserif-bold-webfont.woff") format("woff"), url("/font/droidserif-bold-webfont.ttf") format("truetype"), url("/font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal;
    font-style: normal;
}


body {
    font-family: "DroidSerif Regular" , serif;
}
h1 {
    font-weight: bold;
    font-family: "DroidSerif Bold";
}
— rossisdead
সূত্র
0

আমারও একই সমস্যা ছিল। ফন্টসকুইরেল ডেমো পৃষ্ঠাটি এফএফ-তে কাজ করছে তবে আমার নিজের পৃষ্ঠাতে নয় যদিও সমস্ত ফাইল একই ডোমেন থেকে আসছে!

দেখা গেল যে আমি আমার স্টাইলশীটকে একটি নিখুঁত ইউআরএল (http://example.com/style.css) এর সাথে সংযুক্ত করছি তাই এফএফ ভেবেছিল এটি অন্য কোনও ডোমেন থেকে আসছে। পরিবর্তে আমার স্টাইলশিট লিঙ্ক href /style.css আমার পরিবর্তিত জিনিস।

— SKWebDev
সূত্র
0

স্পেস এবং হাইফেনের ব্যবহার (বা না) বিশেষত আপনার সমস্যা নামকরণ-ইস্যু।

আমি similair ইস্যু, যা আমি স্থাপন দ্বারা সংশোধন করা হয়েছে করেছিলেন চাপ ছিল ঐচ্ছিক কোট ( ') প্রায় font- / পরিবার-নাম, কিন্তু যে আসলে পরোক্ষভাবে একটি নামকরণ সমস্যা সমাধান করা হয়েছে।

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

যাইহোক আমি এখন এটি যেমন বুঝতে পেরেছি, আপনার ঘোষণাটি দুটি সম্ভাব্য স্বতন্ত্র স্বাদের মিশ্রণ ব্যবহার করছে।

@font-face {
  font-family: "DroidSerif Regular";

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

আপনার ঘোষণাপত্রে প্রয়োগ করা হয়েছে, এটি এমন কিছু দেখাচ্ছে:

@font-face {
  font-family: "Droid Serif Regular";

অথবা

@font-face {
  font-family: DroidSerif-Regular;

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

আমি এই নিবন্ধটি জড়িত কিছু দিক বোঝার জন্য সহায়ক বলে মনে করেছি: http://mathiasbynens.be/notes/unquided-font-family

এই নিবন্ধটি বিশেষভাবে পোস্টস্ক্রিপ্ট আরো কিছু বিবরণ এবং একটি অ্যাডোবি স্পেসিফিকেশন PDF- এ কিছু লিঙ্ক আছে: http://rachaelmoore.name/posts/design/css/find-font-name-css-family-stack/

— arri
সূত্র
0

সেটিংসের সাথে ঝামেলা করার দরকার নেই কেবল হরফ-পরিবার থেকে উদ্ধৃতি এবং স্পেসগুলি সরিয়ে ফেলুন:

এই

body {font-family: "DroidSerif Regular", serif; }

এটি হয়ে যায়

body {font-family: DroidSerifRegular, serif; }
— CR41G14
সূত্র
0

আমার ক্ষেত্রে, আমি ফন্ট-মুখের শৈলী কোড সন্নিবেশ করানোর ক্ষেত্রে সমস্যাটি থামিয়ে দিয়েছি

<style type="text/css">
@font-face { 
font-family: 'Amazone';font-style: normal; 
/*font-weight:100; -webkit-font-smoothing: antialiased; font-smooth:always;*/ 
src: local('Amazone'), url(font/Amazone.woff) format('woff');} 
</style>

আপনার সূচিপত্র html বা পিএইচপি পৃষ্ঠায় শৈলীতে ট্যাগটিতে হেডারে ডাইরেক্টলিটি। আমার জন্য কাজ কর!

— Aleksandar
সূত্র
0

এই কারণে এই সমস্যার জন্য এটি গুগলের শীর্ষস্থানীয় ফলাফলগুলির মধ্যে একটি যা আমি আমার জন্য এই সমস্যাটির সমাধান করে তা যুক্ত করতে চাই:

আমাকে ফন্ট-ফেস এর সিআরসি থেকে ফর্ম্যাটটি (ওপেনটাইপ) সরিয়ে ফেলতে হয়েছিল, তবে এটি ফায়ারফক্সেও কাজ করেছিল worked এটি এর আগে ক্রোম এবং সাফারিতে দুর্দান্ত কাজ করেছে।

— theva
সূত্র
0

এটি আপনার কোডের কারণে নয়, এটি আপনার ফায়ারফক্স কনফিগারেশনের কারণে।

এটি Tool bar পশ্চিমা থেকে ইউনিকোডে চেষ্টা করে দেখুন

View > Text Encoding > Unicode
— Simplans
সূত্র
0

আমার একই সমস্যা ছিল এবং এটির জন্য মেটা যুক্ত করে সমাধান করেছি:

<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">

আপনার এইচটিএমএলে ইউনিকোড পাঠ্য থাকলে এটি ফায়ারফক্স এবং এজতে ঘটে।

— আমির মলা
সূত্র
-2

আমি জানি না আপনি কীভাবে সিনট্যাক্স তৈরি করেছিলেন আমি যেমন ফন্ট ঘোষণায় এসভিজি ব্যবহার করেছি, তবে ফন্ট স্কাইরেলের কাছে একটি মাত্র ফন্ট থেকে বুলেট প্রুফ সিনট্যাক্স ফন্ট-ফেস তৈরি করার সত্যিই একটি ভাল সরঞ্জাম রয়েছে।

http://www.fontsquirrel.com/fontface/generator

— rnaud
সূত্র
ধন্যবাদ rnaud, আমি উপরোক্ত জন্য ব্যবহৃত ফন্টসকিয়ারেল প্রকৃত :) কেবলমাত্র পাঠযোগ্য ফর্মটিতে ট্যাব এবং স্পেসগুলির সাথে পুনরায় ফর্ম্যাট করা হয়েছে।
— কৌশিক গোপাল
আপনি ফন্ট ঘোষণায় কখনও এসভিজি ব্যবহার করেন নি তবে আপনি ফন্ট কাঠবিড়ালি ব্যবহার করেন? তারপরে আপনি ফন্ট ঘোষণায় এসভিজি ব্যবহার করেছেন।
— জেসন
1
@ জেসন: আপনি ফন্ট কাঠবিড়ালি সহ এসভিজি ব্যবহার বন্ধ করতে পারেন।
— rossisdead
-2

ফন্ট-ফেস ট্যাগের পথে ইউআরএল এর ব্যবহার হতে পারে। আপনি যদি "http://domain.com" ব্যবহার করেন তবে এটি ফায়ারফক্সে কাজ করে না, আমার জন্য এটি "http://www.domain.com" এ পরিবর্তন করে কাজ করেছে।

— Nehbur
সূত্র
-2

আমার সমস্যাটি হ'ল উইন্ডোজ ফন্টটির নাম দিয়েছে 'ফন্ট.টিটিএফ' এবং ফায়ারফক্স প্রত্যাশিত 'font.ttf' আমি দেখেছি যে লিনাক্সে আমার প্রকল্পটি খোলার পরে, ফন্টটির নামকরণ করা হয়েছে প্রপার নাম এবং সবকিছু কাজ করে

— mikołaj
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.