সিএসএস @ ফন্ট-ফেস - "এসসিআর: লোকাল ('☺')" এর অর্থ কী?


133

আমি @font-faceপ্রথমবার ব্যবহার করছি এবং ফন্টসকিয়ারেল থেকে একটি ফন্ট-কিট ডাউনলোড করেছি

তারা আমার সিএসএসে serোকানোর পরামর্শ দেয় কোডটি হ'ল:

@font-face {
    font-family: 'junctionregularRegular';
    src: url('Junction-webfont.eot');
    src: local('☺'), 
        url('Junction-webfont.woff') format('woff'), 
        url('Junction-webfont.ttf') format('truetype'), 
        url('Junction-webfont.svg#webfontoNEpZXy2') format('svg');
}

এখন, হাসি মুখের জিনিসটি আমাকে স্ট্যাম্প করে দিয়েছে। তবে তেমনি এসআরসি-তে ইউআরএলগুলির সংখ্যাও রয়েছে - কেন তারা এতগুলি ফাইলের প্রস্তাব দেয় এবং যখন কোনও পৃষ্ঠা রেন্ডার করা হয় তখন সেগুলি সমস্ত ব্রাউজারে পাঠানো হবে? .Tf বাদে সব অপসারণে কি কোনও ক্ষতি আছে?

উত্তর:


94

আপনি যদি ফন্ট-কাঠবিড়ির ফন্ট-মুখের জেনারেটরের নোটগুলি পড়েন তবে আপনি দেখতে পাবেন যে এটি পল আইরিশ দ্বারা তৈরি একটি গোচা।

এখানে তার ব্লগ পোস্ট থেকে উদ্ধৃত অংশ :


এবং .. @font-faceসিনট্যাক্স সম্পর্কিত

আমি এখন আসল বুলেটপ্রুফ সিনট্যাক্সের চেয়ে বুলেটপ্রুফ স্মাইলি পরিবর্তনের প্রস্তাব দিই।

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺'),
       url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

বুলেটপ্রুফ পোস্ট থেকে:

হ্যাঁ, এটি একটি হাসি মুখ face ওপেনটাইপ স্পেসটি নির্দেশ করে যে কোনও দ্বি-বাইট ইউনিকোড অক্ষর ম্যাকের কোনও ফন্টের নামগুলিতে মোটেই কাজ করবে না, যাতে কেউ প্রকৃতপক্ষে এই জাতীয় নাম সহ একটি ফন্ট প্রকাশ করেছে এমন সম্ভাবনা কমিয়ে দেয়।

স্মাইলি একটি আরও ভাল সমাধান হওয়ার কয়েকটি কারণ রয়েছে:

  • ওয়েবকিট + ফন্ট ম্যানেজমেন্ট সফ্টওয়্যার স্থানীয় রেফারেন্সগুলিকে গোলমাল করতে পারে যেমন গ্লাইফগুলিকে একটি ব্লকে রূপান্তরিত করে।

  • ওএস এক্স-এ, ফন্ট ম্যানেজমেন্ট সফ্টওয়্যার কোনও লাইব্রেরি / ফন্টের বাইরে অ্যাক্সেসযোগ্য স্থানীয় () ফন্টটি অ্যাক্সেস করার চেষ্টা করার সময় ডায়ালগ দেখানোর জন্য সিস্টেম সেটিংসে পরিবর্তন করতে পারে। আমার বুলেটপ্রুফ পোস্টে আরও বিশদ। ফন্ট এক্সপ্লোরার এক্স ফায়ারফক্সের অন্যান্য জিনিসগুলিকে গোলমাল করতেও পরিচিত।

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

এগুলি সমস্ত সুন্দর প্রান্তের সমস্যা, তবে এটি বিবেচনা করার মতো।


12
অনেক অনেক ধন্যবাদ - এটি এখন স্পষ্ট - আমি এই নিবন্ধটি স্রেফই ওয়েল্বেটিপ.কম এ পেয়েছি যা আমার অন্যান্য সমস্ত প্রশ্নেরও উত্তর দেয়
স্টেফেন্মুরডোচ

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

3
আপনার কি আসলে local()বক্তব্য দরকার ? এটা কি অপ্রয়োজনীয়? url()এটি ছাড়া আপনার ব্রাউজারটি প্রথম ব্যবহার করা উচিত নয় ?
সাইমন পূর্ব

আমি যখন ক্রোম দেব সরঞ্জামগুলিতে আমার সিএসএস উত্সটি দেখি তখন স্মাইলি মুখের জুতা এইভাবে উঠে থাকে: that এটি কি সঠিক?
অ্যান্থনি

1
@ সিমন: স্থানীয় বিবৃতি আইই 6 - 8 সমর্থন করার জন্য রয়েছে (লিঙ্কযুক্ত ব্লগ পোস্টটি দেখুন) সুতরাং আপনি যদি এই ব্রাউজারগুলির প্রয়োজনীয়তা না করেন তবে।
স্টিজন ডি উইট

34

স্থানীয় (☺︎) এটি ব্যবহার করতে পারে না এমন ফন্টগুলি ডাউনলোড করতে আইআই --৮কে ডাইভার্ট করার জন্য সিএসএস হ্যাক (এটি কেবল ইওটি ফর্ম্যাটে ফন্ট ব্যবহার করতে পারে)।

বর্ণিত: শেষ এসসিআর সম্পত্তিটি সিএসএস ক্যাসকেডে অগ্রাধিকার নেয়, যার অর্থ সিএসএস নীচে থেকে উপরে ভাগ করা হবে be স্থানীয় (☺︎) আইন্ডিকে নীচে সিআরসি এড়িয়ে যাবে, ব্যান্ডউইথ যে ফন্টগুলি ব্যবহার করতে পারে না তা ডাউনলোড না করে এবং .eotফর্ম্যাট ( সরাসরি আপনার প্রশ্নের উপরের লাইনে বর্ণিত) ফন্টে যাবে যা এটি ব্যবহার করবে। হাসিখুশি কেবলমাত্র সেই নাম (অক্ষর সংমিশ্রণ) সহ কোনও স্থানীয় ফন্ট থাকবে না তা নিশ্চিত করার জন্য is

এখানে আরও পড়ুন: http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/


-3

@ ফন্ট-ফেস সর্বশেষ এসআরসি সম্পত্তি সিএসএস ক্যাসকেডে অগ্রাধিকার নেয়, যার অর্থ সিএসএস নীচে থেকে উপরে পার্স করা হবে।

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