গুগল ক্রোমে কোনও "ফন্ট স্মুথিং" আছে?

Question

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

আমার h4প্রতিটি ব্রাউজারে আমার দেখতে ভয়ঙ্কর লাগে তবে ক্রোমটি সবচেয়ে খারাপ। ক্রোমে, আমার ফন্টগুলির সমস্ত দেখতে ভয়ঙ্কর দেখাচ্ছে।

কেউ কি আমাকে সঠিক দিকে নির্দেশ করতে পারে? সম্ভবত আপনি কোনও সংস্থান সম্পর্কে জানেন যা এটি পরিষ্কারভাবে ব্যাখ্যা করে? ধন্যবাদ!

উদাহরণস্বরূপ স্ক্রিনশট # 1

এই স্ক্রিনশটটি https://www.dartlang.org/ এর হোমপেজ দেখায় , একটি প্রোগ্রামিং ভাষা যা গুগল তৈরি করে (যাতে আমরা বোঝাতে পারি যে এই ওয়েবসাইটটিও গুগল তৈরি করেছে) এবং গুগল ওয়েবফন্ট ব্যবহার করে।

স্ক্রিনশট বামদিকে গুগল ক্রোম, ডানদিকে ফায়ারফক্স / ইন্টারনেট এক্সপ্লোরার দেখায়:

উদাহরণস্বরূপ স্ক্রিনশট # 2

এই স্ক্রিনশটটি অ্যাডোব.কম-এ একটি প্রোডাক্ট তথ্য পৃষ্ঠা দেখায়, টাইপকিট দ্বারা সরবরাহিত ওয়েবফন্ট ব্যবহার করে। যখন ফন্টের কথা আসে তখন অ্যাডোব এবং টাইপকিট পেশাদার হয়।

স্ক্রিনশট ডানদিকে গুগল ক্রোম, বামদিকে ফায়ারফক্স / ইন্টারনেট এক্সপ্লোরার দেখায়:

Comments

তারা ক্রোম এবং ফায়ারফক্সে আমার কাছে ভাল দেখাচ্ছে ... আপনি কি একটি প্রিন্টস্ক্রিন যুক্ত করতে পারেন?

— জেএফকে

এছাড়াও আইফোন / আইওএস এ তারা দেখতে খুব সুন্দর।

— সন্নিবেশকারী নাম এখানে

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

— জুলে

হ্যাঁ এটি উইন্ডোজ। আপনি কি জানেন যে আমি এটি সম্পর্কে কী করতে পারি?

— ইমেকিটিটির অর্থ

সবেমাত্র এই দরকারী বৈশিষ্ট্যটি আবিষ্কার করেছে: ক্রোম: // ফ্ল্যাগস / # এলসিডি-পাঠ্য

— আ

Answer 1

সমস্যার স্থিতি, জুন 2014: ক্রোম 37 এর সাথে স্থির

অবশেষে, ক্রোম টিম ক্রোম 37 এর সাথে এই ইস্যুটির একটি ফিক্স প্রকাশ করবে যা জুলাই ২০১৪ এ জনসাধারণের জন্য প্রকাশিত হবে। বর্তমান স্থিতিশীল ক্রোম 35 এবং সর্বশেষ ক্রোম 37 (প্রাথমিক বিকাশের পূর্বরূপ) এর তুলনা এখানে দেখুন:

ইস্যুর স্থিতি, ডিসেম্বর 2013

1.) নেই কোন সঠিক সমাধান যখন মাধ্যমে লোড ফন্ট @import, <link href=বা Google এর webfont.js। সমস্যাটি হ'ল ক্রোম কেবল গুগলের এপিআই থেকে ডাবল ফাইলগুলিকে অনুরোধ করে যা মারাত্মকভাবে রেন্ডার করে। আশ্চর্যজনকভাবে অন্য সমস্ত ফন্ট ফাইলের প্রকারগুলি সুন্দরভাবে রেন্ডার করে। তবে কিছু সিএসএস কৌশল রয়েছে যা রেন্ডার করা ফন্টকে কিছুটা "স্মুথন" করবে, আপনি এই উত্তরের চেয়ে আরও গভীরভাবে কাজটি দেখতে পাবেন।

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

৩) গুগল ক্রোম বিকাশকারী দল সেই বিষয়ে কাজ করে। যেহেতু রেন্ডারিং ইঞ্জিনে বেশ কয়েকটি বিশাল পরিবর্তন হয়েছে তবে স্পষ্টতই কিছু কাজ চলছে।

আমি এই ইস্যুতে একটি বিশাল ব্লগ পোস্ট লিখেছি, একবার নির্দ্বিধায় দেখুন: গুগল ক্রোমে কুরুচিপূর্ণ ফন্টের রেন্ডারিং কীভাবে ঠিক করা যায়

পুনরুত্পাদনযোগ্য উদাহরণ

প্রাথমিক প্রশ্ন থেকে উদাহরণটি আজ ক্রোম 29-এ কীভাবে দেখুন দেখুন:

ইতিবাচক উদাহরণ:

বাম: ফায়ারফক্স 23, ডান: ক্রোম 29

ইতিবাচক উদাহরণ:

শীর্ষ: ফায়ারফক্স 23, নীচে: ক্রোম 29

নেতিবাচক উদাহরণ: ক্রোম 30

নেতিবাচক উদাহরণ: ক্রোম 29

সমাধান

উপরের স্ক্রিনশটটি-ওয়েবেকিট-টেক্সট-স্ট্রোকের সাথে ঠিক করা:

প্রথম সারিটি ডিফল্ট, দ্বিতীয়টিতে রয়েছে:

-webkit-text-stroke: 0.3px;

তৃতীয় সারিতে রয়েছে:

-webkit-text-stroke: 0.6px;

সুতরাং, এই ফন্টগুলি ঠিক করার উপায়গুলি কেবল তাদের দেওয়া হচ্ছে

-webkit-text-stroke: 0.Xpx;

বা আরজিবিএ সিনট্যাক্স (মন্তব্যে nezroy দ্বারা পাওয়া গেছে! ধন্যবাদ!)

-webkit-text-stroke: 1px rgba(0,0,0,0.1)

পুরানো সম্ভাবনাও রয়েছে : পাঠ্যটিকে একটি সাধারণ (নকল) ছায়া দিন:

text-shadow: #fff 0px 1px 1px;

আরজিবি সমাধান (জ্যাস্পার এস্পিজোর ব্লগে পাওয়া গেছে):

text-shadow: 0 0 1px rgba(51,51,51,0.2);

আমি এটিতে একটি ব্লগ পোস্ট করেছি:

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

আমার মূল উত্তর:

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

গুগল ক্রোম ডেভেলপমেন্ট টিম থেকে বিবৃতি, মে ২০১৩

বাগ রিপোর্টের অফিসিয়াল স্টেটমেন্ট মন্তব্য করেছে:

আমাদের উইন্ডোজ ফন্ট রেন্ডারিং সক্রিয়ভাবে কাজ করা হচ্ছে। ... আমরা আশা করি একটি মাইলফলক বা দু'টির মধ্যে এমন কিছু আছে যা বিকাশকারীরা খেলতে শুরু করতে পারে। এটি স্থিতিশীল অবস্থায় কত দ্রুত চলে যায় তা হ'ল বরাবরের মতো আমরা যত দ্রুত দ্রুত কোনও উদ্বেগের মূলোৎপাটন করতে এবং জ্বালিয়ে দিতে পারি about

Comments

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

— কুশাগ্রা

কালো পাঠ্যের জন্য, আমি ব্যবহার করেছি text-shadow: #333 0px 0px 1px;। টিপটির জন্য অনেক ধন্যবাদ।

— Yoone

হতে পারে এটি অনুবাদে হারিয়ে গেছে তবে -উইবকিট-টেক্সট-স্ট্রোক কেবল তখনই কাজ করে যখন আপনি ফন্টের রঙের একটি আলফা ব্যবহার করবেন। সুতরাং একটি কালো ফন্টের জন্য আমি "-webkit-Text-Stro: 1px rgba (0,0,0,0.1)" এর মতো কিছু ব্যবহার করি।

— nezroy

আমি লক্ষ করেছি যে ম্যাকের ক্রোম 30 এখন অ্যান্টিঅ্যালাইজিংয়ের একই অভাব প্রদর্শন করছে।

— জওয়াদস্যাক

এই ইস্যুটির জন্য ক্রোম বোর্ডে অফিসিয়াল টিকিটে কোড. google.com/p/chromium/issues/detail?id=137692 মনে হচ্ছে এটি v37 এর জন্য ঠিক করা হয়েছে, যদি আমি থ্রেডের শেষ পোস্টটি সঠিকভাবে undrestand করেছি ।

— গ্রুবার

Answer 2

আমারও একই সমস্যা ছিল এবং আমি স্যাম গডার্ডের এই পোস্টে সমাধানটি পেয়েছি ,

সমাধানটি হ'ল যদি ফন্টে দু'বার কল সংজ্ঞায়িত করা হয় । প্রস্তাবিত হিসাবে প্রথমে, সমস্ত ব্রাউজারগুলির জন্য এবং বিশেষ ক্রিয়াকলাপের জন্য একটি বিশেষ মিডিয়া ক্যোয়ারী সহ একটি বিশেষ কল করার পরে:

@font-face {
  font-family: 'chunk-webfont';
  src: url('../../includes/fonts/chunk-webfont.eot');
  src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
  url('../../includes/fonts/chunk-webfont.woff') format('woff'),
  url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
  url('../../includes/fonts/chunk-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'chunk-webfont';
    src: url('../../includes/fonts/chunk-webfont.svg') format('svg');
  }
}

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

আপনি আমার পৃষ্ঠায় এই নিবন্ধটির একটি স্প্যানিশ সংস্করণ খুঁজে পেতে পারেন

Comments

এটি আসলে সঠিক উত্তর, তবে এটি সহজ করা যেতে পারে। ফন্টের তালিকায় কেবল এসভিজি সংস্করণটি FIRST তালিকাভুক্ত করার ফলে বিষয়টিও সমাধান হয়ে যায়!

— jduncanator

এই উত্তরটি দেয় - এখন পর্যন্ত - সেরা ফলাফল। এসভিজি হরফ -webkit- টেক্সট-স্ট্রোক হ্যাক চেয়ে x100 ভাল দেখায়। প্রধান অবক্ষয়টি হ'ল এসভিজি সংস্করণটির ফন্ট-আকার; এটি সাধারণত অনেক বড় :-( গুগলকে সত্যই এটিকে সাজানো দরকার

— টিমিডফ্রেন্ডলি

আমি সম্পূর্ণভাবে রাজী ! আমি আমার উত্তর থেকে এই উত্তর লিঙ্ক করব।

— স্লিক

@jduncanator প্রথমে এসভিজি তালিকাভুক্ত করা বাঞ্ছনীয় নয় - এর অর্থ এই যে এসভিজি ফন্টটি প্রতিটি একক ব্রাউজার দ্বারা সমর্থন করা হবে যা এটি সমর্থন করে, যখন আপনার উইন্ডোজে ক্রোমের প্রয়োজন হবে।

— RoelN

@jduncanator এই দুটি প্রধান অপরাধী কোনও হিন্টিং সমর্থন নয় এবং বৃহত ফাইলাইজ (ফন্টগুলির জন্য জিজিপ সংক্ষেপণ অনেকগুলি সার্ভারে ডিফল্টরূপে সক্ষম হয় না)।

— RoelN

Answer 3

ক্রোম ফায়ারফক্স বা অন্য কোনও ব্রাউজারের মতো ফন্টগুলি রেন্ডার করে না। এটি সাধারণত উইন্ডোজে চলমান ক্রোমের একটি সমস্যা। আপনি যদি ফন্টগুলি মসৃণ করতে চান তবে -webkit-font-smoothingইয়ার h4ট্যাগগুলিতে এই জাতীয় সম্পত্তিটি ব্যবহার করুন ।

h4 {
    -webkit-font-smoothing: antialiased;
}

আপনি এটিও ব্যবহার করতে পারেন subpixel-antialiased, এটি আপনাকে বিভিন্ন ধরণের স্মুথ প্রদান করবে (পাঠ্যটিকে কিছুটা ঝাপসা / ছায়া গোছানো)। তবে এর প্রভাবগুলি দেখতে আপনার একটি রাতের সংস্করণ প্রয়োজন। আপনি এখানে ফন্ট স্মুথিং সম্পর্কে আরও শিখতে পারেন ।

Comments

আমার কাছে সর্বশেষতম সংস্করণ ক্রোম আজ 8-ফেব -2013 রয়েছে এবং এখানে এই পৃষ্ঠাটিতে তাদের মধ্যে কোনও পার্থক্য দেখা যাচ্ছে না maxvoltar.com/sandbox/foutsmooming

— thednp

এটি কাজ করে না (উইন্ডোতে পরীক্ষিত)। ম্যাকের হিসাবে এটি যাইহোক যাইহোক আমি লোকেদের এটি ব্যবহার থেকে বিরত রাখতে চিহ্নিত করেছি।

— KryptoniteDove

এটা কাজ করে না. আমি কেবল এটি উইন্ডোজ ৮ এ চেষ্টা করে দেখেছি Chrome এর সর্বশেষতম সংস্করণ যাই হোক না কেন (10/8/2013 হিসাবে)

— jay_t55

ম্যাক ক্রোম এবং সাফারিতে এটি কাজ করে তাই এটি যুক্ত করার মতো। অ্যাপল ডট কম এমনকি এটি তাদের বেস.কমের স্টাইলশিটে ব্যবহার করে:body { font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; -webkit-font-smoothing: antialiased; }

— জাস্টিন

ফায়ারফক্স সমতুল্য হ'ল-মোজ-ওক্স-ফন্ট-স্মুথিং: গ্রেস্কেল;

— জেফ ওয়াল্টারস

Answer 4

ঠিক আছে আপনি এটি সহজভাবে ব্যবহার করতে পারেন

-webkit-text-stroke-width: .7px;
-webkit-text-stroke-color: #34343b;
-webkit-font-smoothing:antialiased;

আপনার পাঠ্যের রঙ এবং উপরের পাঠ্য-স্ট্রোক-প্রস্থটি অবশ্যই আমার সমান হবে এবং এটি it

Comments

ফন্ট স্মুথিং টেক্সট স্ট্রোকের কাজ ছাড়া আর কিছুই করে না এবং কিছু ফন্টে সহায়তা করতে পারে। আমি 0.5px স্ট্রোক এবং rgba (0,0,0,0.5) দিয়ে সেরা ফলাফল পেয়েছি বলে মনে হয়েছিল।

— মস

ফায়ারফক্স সমতুল্য হ'ল-মোজ-ওক্স-ফন্ট-স্মুথিং: গ্রেস্কেল;

— জেফ ওয়াল্টারস

এটি দুর্দান্ত ... কেবল উত্তরাধিকারের সাথে # 34343b প্রতিস্থাপন করুন ..;)

— সাগিভ এসইও

Answer 5

আমি এটির আগে বলব যে এটি সর্বদা কার্যকর হয় না , আমি এটি sans-serifফন্ট এবং বাহ্যিক ফন্টের মতো পরীক্ষা করেছিopen sans

কখনও কখনও, আপনি যখন বিশাল ফন্ট ব্যবহার করেন তখন আনুমানিক font-size:49pxএবং উপরের দিকে চেষ্টা করুন

এটি 48px আকারের (পাঠ্যটিতে font-size:48px;থাকা উপাদানটিতে) একটি শিরোনামের পাঠ্য ।

তবে, আপনি যদি 48px থেকে font-size:49px;(এবং 50px, 60px, 80px, ইত্যাদি ...) আপ করেন তবে আকর্ষণীয় কিছু ঘটে

পাঠ্যটি স্বয়ংক্রিয়ভাবে মসৃণ হয় এবং সত্যই ভাল লাগে

অন্য পক্ষের জন্য ...

আপনি যদি ছোট ফন্টগুলি সন্ধান করেন তবে আপনি এটি চেষ্টা করতে পারেন, তবে খুব কার্যকর নয়।

পাঠ্যের পিতামাতার কাছে, কেবলমাত্র পরবর্তী সিএসএস সম্পত্তি প্রয়োগ করুন: -webkit-backface-visibility: hidden;

আপনি এই জাতীয় কিছু রূপান্তর করতে পারেন:

এটি:

(হরফটি হ'ল Kreon)

বিবেচনা করুন যে আপনি যখন সম্পত্তি রাখছেন না, -webkit-backface-visibility: visible;উত্তরাধিকারী হয়

তবে সাবধান হন , এই অনুশীলনটি সর্বদা ভাল ফলাফল দেয় না, আপনি যদি সাবধানে দেখুন, ক্রোমটি কেবল পাঠটিকে কিছুটা ঝাপসা দেখায়।

আর একটি মজার তথ্য:

-webkit-backface-visibility: hidden;আপনি যখন ক্রোমে কোনও পাঠ্য রূপান্তর করবেন তখন খুব কার্যকর হবে ( -webkit-transformসম্পত্তি সহ, যার মধ্যে আবর্তন, স্কিউ ইত্যাদি রয়েছে)

ছাড়া -webkit-backface-visibility: hidden;

সঙ্গে -webkit-backface-visibility: hidden;

ঠিক আছে, কেন জানি না যে অনুশীলনগুলি কাজ করে, তবে এটি আমার পক্ষে হয়। আমার অদ্ভুত ইংরাজির জন্য দুঃখিত