ফন্ট ফায়ারফক্স বনাম ক্রোমে আলাদাভাবে প্রদর্শন করে

Question

মনে হচ্ছে আমার মেনু বারটি ক্রোমের চেয়ে ফায়ারফক্সে আলাদা ফন্টের সাথে প্রদর্শিত হবে। নিম্নলিখিত দেখুন:

এই উপাদানটিতে সিএসএস প্রয়োগ করা হয়েছে:

font-variant: small-caps;
font-size:13px;
letter-spacing: 0px;
font-family: Arial;
font-stretch: normal;
text-decoration: none;

যতদূর আমি এই ফন্ট সম্পর্কিত সমস্ত কিছু বলতে পারি ঠিক তবুও তারা এখনও আলাদাভাবে প্রদর্শন করে (পিক দেখুন)। কেন?

Comments

আপনি কি প্রথমে সিএসএস রিসেট করেছেন?

— কেই

@ কেইই: রিসেটটির কোনও প্রভাব আছে বলে মনে হচ্ছে না

— গোরো

মজাদার. আমি আপনার চিত্রের মতো একই ফলাফল পাচ্ছি : jsfiddle.net/YGwcn মনে হয় প্রতিটি ব্রাউজার কীভাবে শৈলীর ব্যাখ্যা করে to

— কেই

Answer 1

ক্রোম ওয়েবকিট রেন্ডারিং ইঞ্জিন ব্যবহার করে। ফায়ারফক্স গেকো ইঞ্জিন ব্যবহার করে। ডাইরেক্টএক্স এবং ভেগা গ্রাফিক্স ইঞ্জিনগুলি যেমন আই 9 + এবং অপেরাতে ব্যবহৃত হয়, তেমনি উভয়ই ব্যাখ্যা এবং ডিসপ্লে ধরণের কিছুটা আলাদা করে।

আপনি ব্রাউজারগুলিকে অভিন্নভাবে পাঠ্য রেন্ডার করতে বাধ্য করতে পারবেন না, তবে আপনার নেভিগেশন ব্রাউজারগুলিতে একই প্রস্থ গ্রহণ করবে তা নিশ্চিত করতে আপনি বেশ কয়েকটি কাজ করতে পারেন:

1. আপনার নেভিগেশন বারের উপাদানগুলির জন্য চিত্রের পরিবর্তে চিত্র বা এসভিজি ব্যবহার করুন। আপনার নেভিগেশন অঞ্চলটি প্রায়শই পরিবর্তনের সম্ভাবনা না থাকলে এটি কার্যকর হতে পারে। যেমন www.apple.com

2. সিএসএস সহ প্রতিটি নেভিগেশন উপাদানের প্রস্থ ঠিক করুন। ব্রাউজারগুলির মধ্যে পাঠ্যের আকারটি এখনও পৃথক দেখাবে, তবে আপনি যদি <li>আপনার নেভিগেশন অঞ্চলে প্রতিটি উপাদানকে একটি নির্দিষ্ট পিক্সেল প্রস্থ দেন তবে প্রতিটি লিঙ্কের বাউন্ডিং বক্সটি ব্রাউজারগুলিতে খুব সমান হবে এবং ন্যাভ অঞ্চলটির মোট প্রস্থ একই হওয়া উচিত।

Comments

"আপনার নেভিগেশন বারের উপাদানগুলির জন্য চিত্রের পরিবর্তে চিত্রগুলি ব্যবহার করুন" এর মতো জিনিসগুলিতে আপনাকে আলাদা সতর্ক হতে হবে। চিত্রগুলি উচ্চ রেজোলিউশন ডিসপ্লে সহ নতুন মেশিনগুলিতে ভয়ঙ্কর দেখাবে (যেমন অ্যাপল "রেটিনা" প্রদর্শন, কিছু অন্যান্য স্মার্ট ফোন) আপনি যদি ডাবল-রেজুলেশন অনুলিপি না সরবরাহ করেন তবে।

— অলি হজসন

@ অলিহডসন শিওর উচ্চ-আকারের পর্দার জন্য ডাবল-সাইজের পিএনজি বা এসভিজি (যা অ্যাপল তাদের এনএভিতে ব্যবহার করে) সর্বোত্তম be

— নিক

@ নিক - হ্যাঁ, এসভিজিই সেরা সমাধান হবে।

— m93a

এই ক্ষেত্রে এটি না। ফায়ারফক্স letter-spacingএসভিজি উপাদানগুলিতে সমর্থন করে না ।

— Yay295

@ Yay295 আপনি এসভিজিতে ফন্টগুলি রূপরেখার করতে পারেন।

— নিক

Answer 2

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

Answer 3

যদি কেউ এদিকে আসে তবে আমার জন্য সমস্যা ছিল letter-spacing। ক্রোম এবং ফায়ারফক্স অন্যভাবে সম্পত্তি পরিচালনা করে।

আমার সমস্যাটি ছিল letter-spacingঅন্যান্য উপাদানগুলির অবস্থানকে প্রভাবিত করছে; এনএভি মেনুতে বিশেষত কিছু চিত্র। সম্পত্তি সরিয়ে দিয়ে আমার সমস্যাটি তাত্ক্ষণিকভাবে সমাধান হয়ে গেল।

আমি এটিও পড়েছি যে বিশেষত .pointমানগুলি ব্যবহার করা 2 ব্রাউজারগুলির মধ্যে পরিবর্তিত প্রভাব ফেলতে পারে যা আমার ক্ষেত্রে সত্য ছিল।

Answer 4

একই ইস্যু ধরনের এখানে বর্ণিত

আপনি নিজের সিএসএস পুনরায় সেট করতে পারেন

http://developer.yahoo.com/yui/reset/ আশা করি - সম্ভবত আপনি কিছু ক্লু পাবেন

Answer 5

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

Answer 6

দুটি ওএসে 6 ব্রাউজার / 4 রেন্ডারিং ইঞ্জিন পরীক্ষার পরে। লাইন স্পেসিংয়ের সাথেও আমি বেশিরভাগ একইরকম পেয়েছি। আমি এক মিনিটের মধ্যে উইন্ডোজ এবং লিনাক্সের সাথে পার্থক্যটি দেখব।

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

যাইহোক আপনি যদি সময় রোমান নির্দিষ্ট করেন বা ফন্ট ফাইলগুলি সরবরাহ করতে @ ফন্টফেস ব্যবহার করেন! আপনি আপনার ন্যাভ বারগুলিকে চটচটে করতে সক্ষম হতে পারেন ;-)

Answer 7

আমারও অনুরূপ সমস্যা হয়েছিল এবং এর সমাধান আমি পেয়েছি:

ব্যবহার:

font-family: 'Donegal One', serif;
font-variant: small-caps;
text-rendering: optimizeLegibility;

ফায়ারফক্সে, এটি দুর্দান্ত দেখাচ্ছে। ক্রোমে বর্ণের ব্যবধানটি অদ্ভুত ছিল। optimizelegibilityশৈলী অপসারণ কৌশলটি করেছে। উভয় ব্রাউজার এখন একইভাবে রেন্ডার।

আমি ওয়েবকিটের জন্য স্টাইলটি সরিয়ে অন্য ব্রাউজারগুলির জন্য এটি রেখে দেওয়ার সিদ্ধান্ত নিয়েছি। এখন ঠিক আছে।

Answer 8

ওপেন-সানসের সাথে আমারও একই সমস্যা ছিল, এটি আমার জন্য এটি করেছে:

-webkit-font-smoothing: subpixel-antialiased;
font-smoothing: subpixel-antialiased;