@ ফন্ট-ফেস কেন ওয়ফ ফাইলগুলিতে 404 ত্রুটি ফেলছে?


422

আমি @font-faceআমার সংস্থার সাইটে ব্যবহার করছি এবং এটি দুর্দান্ত / দুর্দান্ত দেখায়। ফায়ারফক্স এবং ক্রোম বাদে .woffফাইলটিতে একটি 404 ত্রুটি নিক্ষেপ করবে । আইই ত্রুটি ছুঁড়ে না। আমার মূলে ফন্ট রয়েছে তবে আমি সিএসএস ফোল্ডারে ফন্টের সাথে চেষ্টা করেছি এমনকি ফন্টের জন্য পুরো ইউআরএল দিয়েছি। যদি আমার সিএসএস ফাইল থেকে এই ফন্টগুলি সরান তবে আমি 404 পাই না তাই আমি জানি এটি কোনও সিনট্যাক্স ত্রুটি নয়।

এছাড়াও, আমি @font-faceফন্টগুলি এবং কোড তৈরি করতে ফন্টকুইরেলস সরঞ্জামটি ব্যবহার করেছি :

@font-face {
  font-family: 'LaurenCBrownRegular';
  src: url('/laurencb-webfont.eot');
  src: local('☺'), 
    url('/laurencb-webfont.woff') format('woff'), 
    url('/laurencb-webfont.ttf') format('truetype'), 
    url('/laurencb-webfont.svg#webfontaaFhOfws') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'FontinSansRegular';
  src: url('/fontin_sans_r_45b-webfont.eot');
  src: local('☺'), 
    url('/fontin_sans_r_45b-webfont.woff') format('woff'), 
    url('/fontin_sans_r_45b-webfont.ttf') format('truetype'), 
    url('/fontin_sans_r_45b-webfont.svg#webfontKJHTwWCi') format('svg');
  font-weight: normal;
  font-style: normal;
}

ফায়ারফক্স এবং ক্রোমের জন্য আপনার কী সংস্করণ রয়েছে? গেকো 1.9.2 (ফায়ারফক্স 3.6) ডাব্লুএইউএফএফের জন্য সমর্থন যোগ করে adds
সোটিরিস

ওটিএফ-এ আবারও ওফিতে রূপান্তর করার চেষ্টা করুন। আমারও একই সমস্যা ছিল এবং ফাইল পার্সিংটি দূষিত। এটি বিভিন্ন ধরণের ফন্টে রূপান্তর করার জন্য একটি ভাল সাইট। অনলাইনfontconverter.com
stacksonstacksonstacks

উত্তর:


722

আমি ক্রোমে woff ফাইলগুলিতে এই একই লক্ষণটি - 404 - এবং আইআইএস 6 সহ একটি উইন্ডোজ সার্ভারে একটি অ্যাপ্লিকেশন চালিয়ে যাচ্ছিলাম।

আপনি যদি একই পরিস্থিতিতে থাকেন তবে নিম্নলিখিতগুলি করে এটি ঠিক করতে পারেন:

সমাধান ঘ

"কেবলমাত্র আইআইএস ম্যানেজারের মাধ্যমে নিম্নলিখিত মাইম টাইম ঘোষণাগুলি যুক্ত করুন (ওয়েবসাইটের বৈশিষ্ট্যের HTTP শিরোনাম ট্যাব): ওফ অ্যাপ্লিকেশন / এক্স-ওফ "

আপডেট: এমওএএম টাইপ অনুযায়ী ওয়াফ ফন্ট এবং গ্রস্ম্টো অনুসারে আসল এমএমআই টাইপ হ'ল অ্যাপ্লিকেশন / এক্স-ফন্ট-ওফ (কমপক্ষে ক্রোমের জন্য)। এক্স-ওয়াফ Chrome 404 গুলি স্থির করবে, এক্স-ফন্ট-ওফ ক্রোম সতর্কতাগুলি ঠিক করবে।

২০১ of সালের হিসাবে : ওয়াফ ফন্টগুলি এখন মাইম টাইপ এবং এর জন্য আরএফসি 8081 নির্দিষ্টকরণের অংশ হিসাবে মানক করা হয়েছে ।font/wofffont/woff2

আইআইএস 6 মাইমির প্রকারগুলি

সেব দুগ্গানকে ধন্যবাদ: http://sebduggan.com/posts/serving-web-fouts-from-iis

সমাধান 2

আপনি ওয়েব কনফিগারেশনে মাইম টাইপগুলি যুক্ত করতে পারেন :

  <system.webServer>
    <staticContent>
      <remove fileExtension=".woff" /> <!-- In case IIS already has this mime type -->
      <mimeMap fileExtension=".woff" mimeType="font/woff" />
    </staticContent>    
  </system.webServer>

5
নোট করুন যে Cannot add duplicate collection entry of type ‘mimeMap’ with unique key attribute ‘fileExtension’...অ্যাপ্লিকেশনহস্ট.কনফিগ ফাইলের সাথে বিরোধের কারণে আপনি একটি ত্রুটি পেতে পারেন । <remove fileExtension=".woff" />ভুয়া সদৃশ অপসারণ করতে আপনি নিজের ওয়েবকনফিগ ফাইলে নতুন মাইম্যাপটি নির্দিষ্ট করার আগে ডান যুক্ত করে এটি ঠিক করতে পারেন।
পিট

11
মাইম টাইপটি হিসাবে মানসম্মত করা হয়েছে application/font-woff
ফার্নান্দো কোরিয়া

5
এই কৌশলটি! আপনার যদি একই সমস্যা থাকে তবে। ওফ 2 ফাইলের সাথে কেবল সেই এক্সটেনশানটির সাথে অন্য একটি মাইম টাইপ (বা কনফিগারেশন) যুক্ত করুন
মানচিত্রের

2
দেখে মনে হচ্ছে স্পেসিফিকেশনটি (আবার) পরিবর্তিত হয়েছে। আরএফসি 8081 অনুসারে আপনার পরামর্শটি application/x-font-woffএখন পুরানো , সঠিক মাইম টাইপটি এখন font/woffএবং font/woff2। আপনার
লিয়াম

3
এই সমাধানটি আমার পক্ষে কার্যকর হয়নি। আমার জন্য কৌতুকটি কী ছিল: হটকেকসকমার্স.জেন্ডেস্ক.com
কিম লেজ

53

এই পোস্টের উত্তরটি খুব সহায়ক এবং একটি বড় সময় সেভার ছিল। তবে, আমি দেখতে পেলাম যে ব্যবহার করার সময় FontAwesome 4.50, আমাকে woff2অন্য ধরণের এক্সটেনশানগুলির জন্য অতিরিক্ত কনফিগারেশন যুক্ত করতে হয়েছিল যা নীচের অন্য অনুরোধগুলির জন্য দেখানো হয়েছেwoff2 ধরণের কনসোল> ত্রুটিগুলির অধীনে Chrome এর বিকাশকারী সরঞ্জামগুলিতে 404 ত্রুটি দিচ্ছে।

এস.সার্পের মন্তব্য অনুসারে, নীচের কনফিগারেশনটি <system.webServer>ট্যাগের মধ্যে রাখা উচিত ।

<staticContent>
  <remove fileExtension=".woff" />
  <!-- In case IIS already has this mime type -->
  <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
  <remove fileExtension=".woff2" />
  <!-- In case IIS already has this mime type -->
  <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff2" />
</staticContent>

3
এবং আপনার উল্লিখিত ট্যাগ <staticContent>একটি ভিতরে হতে হবে <system.webServer>ট্যাগটি
S.Serpooshan

পুরোপুরি ঠিকঠাক কাজ করা, উইন্ডোজ সার্ভার 2012 r2, এএসপি.নেট এমভিসি 5 থেকে রিপোর্ট করা।
ক্রোমওয়েল

44

আসলে @ ইয়ান রবিনসন উত্তরটি ভাল কাজ করে তবে ক্রোম সেই বার্তাটি নিয়ে অভিযোগ জানাতে থাকবে: " রিসোর্স ফন্ট হিসাবে ব্যাখ্যা করা হয়েছে তবে এমআইএমআই টাইপ অ্যাপ্লিকেশন / এক্স-ওফের সাথে স্থানান্তরিত হয়েছে "

যদি আপনি এটি পান তবে আপনি এ থেকে পরিবর্তন করতে পারবেন

আবেদন / এক্স-woff

প্রতি

অ্যাপ্লিকেশন / এক্স -ফন্ট -উফ

এবং আপনার আর কোনও ক্রোম কনসোল ত্রুটি থাকবে না!

(ক্রোম 17 এ পরীক্ষিত)


আপনি এটি কোথায় পরিবর্তন করবেন? ব্রাউজারে নাকি সার্ভারে?
জ্যাক উইলসন

উপরের উত্তরে বর্ণিত হিসাবে এটি অবশ্যই সার্ভারের হতে হবে। এই সমাধান আইআইএস 6. সঙ্গে উইন্ডোজ সার্ভার জন্য
adriendenat

1
ক্রোম এখনও আমার কাছে এক্স-ফন্ট-ওফের সাথে অভিযোগ করছে
সোল

আমার মন্তব্যটি পুনরাবৃত্তি করতে : মনে হচ্ছে স্পেসিফিকেশনটি (আবার) পরিবর্তিত হয়েছে। আরএফসি 8081 অনুসারে আপনার পরামর্শটি application/x-font-woffএখন পুরানো , সঠিক মাইম টাইপটি এখন font/woffএবং font/woff2। আপনার
লিয়াম

15

আইআইএস 7 এর সমাধান

আমিও একই বিষয়টি নিয়ে এসেছি। আমি মনে করি সার্ভার স্তর থেকে এই কনফিগারেশনটি করা আরও ভাল হবে কারণ এটি সমস্ত ওয়েবসাইটের জন্য প্রযোজ্য।

  1. আইআইএসের রুট নোডে যান এবং "এমআইএমআই টাইপস" কনফিগারেশন বিকল্পটিতে ডাবল ক্লিক করুন

  2. উপরের ডানদিকে ক্রিয়া প্যানেলে "যুক্ত করুন" লিঙ্কটি ক্লিক করুন।

  3. এটি একটি সংলাপ আনবে। .ওফ ফাইলের এক্সটেনশান যুক্ত করুন এবং সংশ্লিষ্ট এমআইএম টাইপের হিসাবে "অ্যাপ্লিকেশন / এক্স-ফন্ট-ওফ" উল্লেখ করুন।

.ওফ ফাইলের নাম এক্সটেনশনের জন্য মাইমে টাইপ করুন

মাইম টাইপগুলিতে যান

মাইম টাইপ যুক্ত করুন

আইআইএস 7-তে সমস্যাটি সমাধান করার জন্য আমি যা করেছি তা এখানে


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

@ ক্লিওপাত্রা - বিশদ সহ উত্তরটি আপডেট করেছেন এবং লিঙ্কটি সরিয়ে দিয়েছেন।
ধনুকা 777

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

10

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

<system.webServer>
  <staticContent>
    <remove fileExtension=".woff" />
    <remove fileExtension=".woff2" />
    <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
    <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff" />
  </staticContent>
  <security>
      <requestFiltering>
          <fileExtensions>
              <add fileExtension=".woff" allowed="true" />
              <add fileExtension=".ttf" allowed="true" />
              <add fileExtension=".woff2" allowed="true" />
          </fileExtensions>
      </requestFiltering>
  </security>    
</system.webServer>

8

আইআইএস সার্ভার ম্যানেজার চালান (কমান্ড চালান: inetmgr) মাইম প্রকারগুলি খুলুন এবং নিম্নলিখিতগুলি যুক্ত করুন

ফাইলের নাম এক্সটেনশন: .ওফ

মাইমির ধরণ : অ্যাপ্লিকেশন / অক্টেট-স্ট্রিম


1

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


1

আপনি যদি আইআইএস 7 এর অধীনে কোডআইগনিটার ব্যবহার করছেন:

আপনার web.config ফাইলে, যোগ woff করতে প্যাটার্ন

<rule name="Rewrite CI Index">
  <match url=".*" />
    <conditions>
      <add input="{REQUEST_FILENAME}" pattern="css|js|jpg|jpeg|png|gif|ico|htm|html|woff" negate="true" />
    </conditions>
    <action type="Rewrite" url="index.php/{R:0}" />
 </rule>

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


0

এটি সুস্পষ্ট হতে পারে, তবে এটি 404s দিয়ে আমাকে বহুবার ট্রিপ করেছে ... ফন্ট ফোল্ডারের অনুমতিগুলি সঠিকভাবে সেট করা আছে কিনা তা নিশ্চিত করুন।


0

আপনার ইউআরএল পুনরায় লেখক পরীক্ষা করুন। "অদ্ভুত" কিছু পাওয়া গেলে এটি 404 নিক্ষেপ করতে পারে।


0

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


0

যদি এখনও এমআইএমআই টাইপগুলি যুক্ত করার পরে কাজ না করে তবে দয়া করে "বেনামে প্রমাণীকরণ" সাইটের প্রমাণীকরণ বিভাগে সক্ষম কিনা তা পরীক্ষা করে দেখুন এবং প্রদত্ত স্ক্রিন শট অনুযায়ী "অ্যাপ্লিকেশন পুল পরিচয়" নির্বাচন করা নিশ্চিত করুন।

এখানে চিত্র বর্ণনা লিখুন


-1

আইআইএস মাইম প্রকার: .ফফফ্ট / এক্স-ওয়াফ (অ্যাপ্লিকেশন / এক্স-ওয়াফ, বা অ্যাপ্লিকেশন / এক্স-ফন্ট-ওফ নয়)


1
আপনি কি দয়া করে আপনার উত্তরটি প্রসারিত করতে পারেন এবং কীভাবে এটি সমস্যার সমাধান করে সে সম্পর্কে বিশদ সরবরাহ করতে পারেন।
টেলিক্স


-1

এটি সমাধান:

আমাকে মো'বুলেটপ্রুফার পদ্ধতিটি ব্যবহার করতে হয়েছিল


এর অর্থ কি আপনি আর ডাব্লুওএফএফ ব্যবহার করছেন না? এটি কি এমন হতে পারে যে আপনার ওয়েবসভারটি ডাব্লুএফএফ ফাইলগুলি সরবরাহ করার জন্য সঠিকভাবে কনফিগার করা হয়নি? যেমন এটি দেখুন: স্ট্যাকওভারফ্লো প্রশ্নগুলি 3594823 mime
মেরেটার

আমি অন্য মেশিনের সাথে এনকোডিং সহ ফন্টটি পরীক্ষা করেছি। জরিমানা এবং 404 ত্রুটি প্রদর্শন করে।
ডিসিপিএনপি 450

এটা আমাকে দিতে দেবে না এনকোডিংটি দীর্ঘ পথে চলেছে। এটি এখানে ব্যাখ্যা করা হয়েছে: paulirish.com/2010/font-face-gotchas
dcp3450

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