ফায়ারফক্স এবং অপেরাতে ওয়েবফন্ট স্মুথিং এবং অ্যান্টিএলিয়াসিং

Question

আমার সাইটে কাস্টম-মেড ওয়েব ফন্ট ব্যবহার করা হয়েছে। আমার রেন্ডারিং আউটপুট শৈল করতে, আমি নিম্নলিখিত কোডটি ব্যবহার করেছি:

//-webkit-text-stroke-width: .05px;
//-webkit-text-stroke-color: white;
-webkit-font-smoothing: antialiased;

এটি সাফারি এবং ক্রোমে সূক্ষ্মভাবে কাজ করে (প্রান্তগুলি তীক্ষ্ণ এবং লাইনগুলি পাতলা হয়)। ফায়ারফক্স এবং অপেরাতে একই স্টাইল প্রয়োগের কোনও উপায় আছে কি?

Comments

এটি করা বন্ধ করে এবং এখানে কেন পড়তে হবে তা ভাল ধারণা হবে: usabilitypost.com/2012/11/05/stop-fixing-font-smoothing

— fregante

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

— ডিলান

এটি সম্পূর্ণ বিস্তৃত সাধারণীকরণ নয়। নিবন্ধটি বলেছে যে সাবপিক্সেল রেন্ডারিং মূলত গা dark় পটভূমিতে হালকা পাঠ্যকে আরও পাঠযোগ্য (অর্থাত্ অ্যাক্সেসযোগ্য) তৈরি করার উদ্দেশ্যে করা হয়েছিল, এবং এর মতো একটি বিস্তৃত সিএসএস সংজ্ঞা তৈরি body { -webkit-font-smoothing: antialiased; }করা খুব ভারি হাতে।

— ম্যাট শিউরিচ

হালকা ব্যাকগ্রাউন্ডে অন্ধকারযুক্ত আমার ওয়েব ফন্টগুলিও "মিথ্যা সাহসী" হয়ে উঠছে। আমি চারদিকে "অ্যান্টিয়ালিয়াসেড" বলি।

— জেসন টি ফেদারিংহাম

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

— বিওজর

Answer 1

সংস্করণ 15.0 থেকে অপেরা যেমন ব্লিঙ্ক দ্বারা চালিত -webkit-font-smoothing: antialiased, অপেরাতেও কাজ করে না।

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

-moz-osx-font-smoothing: grayscale;

এটি অন্ধকার ব্যাকগ্রাউন্ডে অস্পষ্ট আইকন ফন্ট বা হালকা পাঠ্য ঠিক করা উচিত।

.font-smoothing {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

আপনি OSX এ ফন্ট রেন্ডারিং সম্পর্কে আমার পোস্টটি পড়তে পারেন যা উভয় বৈশিষ্ট্য হ্যান্ডেল করার জন্য একটি সাস মিক্সিন অন্তর্ভুক্ত করে।

Comments

কেন কেবল ওএসএক্স ??

— ইয়াসির এন্নাজক

উইন্ডোজ এবং লিনাক্স ওএসএক্সের চেয়ে ফন্টগুলির জন্য বিভিন্ন রেন্ডারিং অ্যালগরিদম ব্যবহার করে।

— ম্যাক্সিমিলিয়ান হফম্যান

Answer 2

ঠিক আছে, ফায়ারফক্স এর মতো কিছু সমর্থন করে না।

মোজিলা থেকে রেফারেন্স পৃষ্ঠায় উল্লেখ করা হয়েছে font-smoothযেহেতু ফন্টগুলি রেন্ডার করার সময় CSS সম্পত্তি অ্যান্টি-এলিয়াসিংয়ের প্রয়োগ নিয়ন্ত্রণ করে, তবে এই সম্পত্তিটি এই স্পেসিফিকেশন থেকে সরানো হয়েছে এবং বর্তমানে এটি স্ট্যান্ডার্ড ট্র্যাকের নয়।

এই সম্পত্তিটি কেবল ওয়েবকিট ব্রাউজারগুলিতে সমর্থিত।

আপনি যদি বিকল্প চান তবে এটি পরীক্ষা করে দেখতে পারেন:

• পাঠ্য-শ্যাডো অ্যান্টি-এলিয়াসিং | ফিলিপ রিনিচ, ওয়েবসাইটগুলি - ব্লগ
• cufón - মানুষের জন্য ফন্ট

Comments

ভাল, আমার সমস্যাটি হ'ল আমার ফন্টগুলি "গা bold়" হয়ে ফায়ারফক্স এবং অপেরাতে ফুলে যায় blo এর সাথে -webkit-font-smoothing:antialiased;আমি এটি সাফারি এবং ক্রোমে স্থির করতে পারতাম। আমি ফায়ারফক্সেও আমার ফন্টগুলি কিছুটা হালকা করার জন্য কোনও "হ্যাক" সন্ধান করতে চাই। আমি text-shadowকেবল মোজে এটিতে একটি সাদা প্রয়োগ করার কথা ভেবেছিলাম তবে "ইনসেট" পাঠ্য-ছায়া প্রয়োগ করার কোনও উপায় নেই যা ফন্টটি হালকা করে তুলবে।

— ম্যাট

@matt আপনি এই প্রশ্ন মধ্যে কিছু সিএসএস উপদেশাবলী চেষ্টা করতে পারেন: stackoverflow.com/questions/761778/... হতে পারে আপনি কিছু সিএসএস বিকল্প পাবেন।

— জোনাথন নাগুইন

Answer 3

কেস: অন্ধকার পটভূমিতে জাগি ওয়েব ফন্টের সাথে হালকা পাঠ্য ফায়ারফক্স (v35) / উইন্ডোজ
উদাহরণ: গুগল ওয়েব ফন্ট রুদা

অবাক করা সমাধান -
প্রয়োগকৃত নির্বাচকগুলিতে নিম্নলিখিত সম্পত্তি যুক্ত করা:

selector {
    text-shadow: 0 0 0;
}

আসলে, ফলাফলটি একই সাথে text-shadow: 0 0;, তবে আমি স্পষ্টতই অস্পষ্ট-ব্যাসার্ধ সেট করতে চাই।

এটি কোনও সর্বজনীন সমাধান নয়, তবে এটি কিছু ক্ষেত্রে সহায়তা করতে পারে। তবুও আমি এখনও পর্যন্ত এই সমাধানটির নেতিবাচক পারফরম্যান্সের প্রভাব (পুরোপুরি পরীক্ষিত হইনি)।

Comments

সাহায্য করার জন্য কিছুই করে না

— vsync

এটি ফন্টের উপর ভিত্তি করে ক্রোমে আরও সাহসী ফন্টগুলি তৈরি করবে

— বেন সেওয়ার্ডস

@ বেনসওয়ার্ডস আপনি কি এমন কোনও ফন্ট সরবরাহ করবেন যেখানে আপনি সাহসী ফন্টের রেন্ডারিংয়ের জন্য ছুটে এসেছেন? অথবা এমনকি একটি কোডপেন? আগাম ধন্যবাদ.

— ভোলকার ই।

@VolkerE। দুর্দান্ত সমাধানের জন্য ধন্যবাদ। আমি একটি স্টিকি শিরোনামে উত্স কোড প্রো ফন্টের সাথে একই বিরক্তিকর সমস্যাটি পেয়েছি। আমি যখন ফন্টটি খুব ছোট করে স্ক্রোল করি এবং আপনার পাঠ্য-ছায়ার সাথে ফন্টটি কোনও সমস্যা করে না।

— ইভোলিউটিও

বর্তমান ক্রোম (58.0.3029.110) এ "মসৃণ" পাঠ্যটি আসলেই ভয়াবহ দেখাচ্ছে। ("জাগি" পাঠ্যটি কিছুটা ভাল)

— পুনরাবৃত্তিমূলক

Answer 4

বিষয়টি চালানোর পর, আমি বুঝতে পারলাম যে আমার WOFF ফাইল সঠিকভাবে সম্পন্ন না হয়, আমি একটি নতুন TTF পাঠানো FontSquirrel যা আমাকে একটি সঠিক WOFF এটি কোনো অতিরিক্ত CSS যুক্ত থাকলে ফায়ারফক্সে মসৃণ ছিল দিলেন।

Comments

এটা কি উইন্ডোতে আছে?

— বিগনেশ

Answer 5

আমি এই লিঙ্কটি সহ সমাধানটি পেয়েছি: http://pixelsvsbytes.com/blog/2013/02/nice-web-fouts-for-every-browser/

ধাপে ধাপে পদ্ধতি:

• আপনার ফন্টটি কোনও ওয়েবফন্টজিনিয়রে প্রেরণ করুন এবং জিপটি পান
• জিপ ফাইলে টিটিএফ ফন্টটি সন্ধান করুন
• তারপরে, লিনাক্স-এ, এই আদেশটি (বা ইনস্টল করে apt-get install ttfautohint) করুন:
  ttfautohint --strong-stem-width=g neosansstd-black.ttf neosansstd-black.changed.ttf
• তারপরে, আরও একটি, ওয়েবফন্টজিনিয়রে নতুন টিটিএফ ফাইল (neosansstd-black.changed.ttf) প্রেরণ করুন
• আপনি আপনার সমস্ত ওয়েবফন্টের সাথে একটি নিখুঁত জিপ পান!

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

Comments

সিএসএস-ট্রানজিশনের সময় ফন্ট জ্যাগিং ঠিক করার ক্ষেত্রে দুর্দান্ত কাজ করেছে (যদিও এটি সম্পূর্ণরূপে অপসারণ করা হয়নি)। আমি ফন্টসকিয়ারেল জেনারেটরটি টিটিএফএফটহিন্ট বিকল্পের সাথে ব্যবহার করেছি

— অ্যান্ড্রে

আমি ফন্টিকে উইন্ডোজ সক্ষম করার জন্য অটোহিন্ট সহ আমার ডাব্লুএফএফ, ডাব্লুএফএফ 2, ইওটি এবং এসভিজি ফাইলগুলি পুনরায় উত্পন্ন করতে ব্যবহার করেছি।

— ডোমিনিক

Answer 6

... বডি ট্যাগে এবং এগুলি সামগ্রী এবং টাইপফেস থেকে সাধারণভাবে আরও ভাল দেখায় ...

body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
font-smooth: always;

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


#content {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

}

Comments

আমি দুঃখিত ... "রিইনশ্রেইবেন" কী? আমাদের বেশিরভাগই জার্মান ভাষায় কথা বলেন না, তাই আপনি যদি আপনার সম্পূর্ণ পোস্টটি ইংরেজী ভাষায় তৈরি করেন তবে ভাল লাগবে।

— রেয়রিং

ওহ দয়া করে, আমি ক্ষমা চেয়ে নিচ্ছি গুগলে অনুবাদ করেছি এবং কোনওভাবেই ভুল শব্দটি পিছলে যাওয়ার পরে :)

— ব্যবহারকারীর 633787

Answer 7

যখন পাঠ্যের রঙ গা dark় হয়, সাফারি এবং ক্রোমে, আমার পাঠ্য-স্ট্রোক সিএসএস বৈশিষ্ট্যের সাথে আরও ভাল ফলাফল হয়।

-webkit-text-stroke: 0.5px #000;

Comments

প্রশ্নটি ফায়ারফক্স এবং অপেরা সম্পর্কে। সুতরাং এই প্রশ্নের প্রশ্নের সাথে কোনও সম্পর্ক নেই

— vsync

Answer 8

যোগ করার পদ্ধতি

font-weight: normal;

আপনার @ ফন্ট-ফেস ফন্টগুলি ফায়ারফক্সে সাহসী চেহারা ঠিক করবে।

Comments

font-weight(আশ্চর্যজনকভাবে) ফন্টের ওজনকে প্রভাবিত করে, ফন্ট স্মুথিং নয়। লিঙ্কযুক্ত ফন্ট ফাইলটি যদি কোনও সাধারণ ওজনের ফন্ট ফাইল না হয় তবে এটি @ ফন্ট-মুখের ঘোষণার সাথে যুক্ত করা বিভ্রান্তি সৃষ্টি করবে।

— মাইক মায়ার

@ মাইকমিয়ার আসলে আমি হারুনের মন্তব্যের সাথে একমত। ফন্ট-ওজন যুক্ত করা: একটি ফন্টের স্বাভাবিক হিসাবে এটি একটি "হালকা" ফন্ট অন্তর্ভুক্ত করে যা বিভ্রান্তি যোগ করে বলে মনে হয় তবে এটি কেবল নবজাতক বিকাশকারীকে বিভ্রান্ত করা উচিত। আমার অভিজ্ঞতায় স্বাভাবিকের একটি ডিফল্ট নির্দিষ্ট করা ভাল অভ্যাস। এই ক্ষেত্রে সাধারণ অন্তর্ভুক্ত ফন্ট এবং ব্যবহৃত অক্ষরগুলির জন্য "স্বাভাবিক" বোঝায় এবং এটি হরফের মুখের তথ্য নির্দিষ্ট করার উদ্দেশ্যে নয়। বেশিরভাগ ক্ষেত্রে এটি (বিশেষত বৃহত প্ল্যাটফর্মগুলিতে) আপনি ফন্ট শৈলীর আশেপাশে দেখতে পাবেন এমন সমস্ত খুব সাধারণ মন্দ স্থাপত্য থেকে আসা বাগের সম্ভাবনা হ্রাস করবে।

— দোয়াদওয়াদ

আসলে ফন্টের মুখের নামটি নিজেই ফন্টের ওজনকে ডিফল্টরূপে বোঝানো উচিত ...!

— দোয়াদওয়াদ

@ দেউদওয়াদ আপনার পক্ষে সম্মত যে দুর্দান্ত, এবং হ্যাঁ, এটি একটি শালীন (যদিও এর চেয়ে ক্ষুদ্র শব্দযুক্ত) সম্পর্কে "প্রো-টিপ" font-weight। কথাটি হ'ল, ওপি font-weightওপেনের বিষয়ে জিজ্ঞাসা করছিল না - তিনি অ্যান্টিয়ালাইজিং সম্পর্কে জিজ্ঞাসা করেছিলেন । এটি সম্পূর্ণ আলাদা প্রশ্নের সঠিক উত্তর।

— মাইক মায়ার

@ মাইকমিয়ার আপনি পুরোপুরি ঠিক বলেছেন আমি মাঝে মাঝে কিছুটা দূরে চলে যাই। ;)

— দুদেওয়াদ