গুগল ফন্টগুলির জন্য স্টাইল এবং ওজন নির্দিষ্ট করে

110

আমি আমার কয়েকটি পৃষ্ঠায় গুগল হরফ ব্যবহার করছি এবং একটি ফন্টের বৈচিত্রগুলি ব্যবহার করার চেষ্টা করার সময় একটি প্রাচীরের সাথে আঘাত করছি। উদাহরণ: http://www.google.com

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

আমি ফন্ট-পরিবারের বৈশিষ্ট্য হিসাবে নীচের সমস্তগুলি চেষ্টা করেছিলাম তবে কোনও ডাইস নেই:

'ওপেন সানস বোল্ড'
'ওপেন সানস 700'
'ওপেন সানস বোল্ড 700'
'ওপেন সানস: বোল্ড'

গুগল ডক্স নিজেরাই খুব বেশি সহায়তা দেয় না। এই রূপগুলি প্রদর্শনের জন্য আমার সিএসএস বিধিগুলি কীভাবে লিখতে হবে সে সম্পর্কে কারও ধারণা আছে?

css fonts

— স্টিভেন গার্সিয়া
সূত্র

149

তারা নিয়মিত সিএসএস ব্যবহার করে।

কেবল আপনার নিয়মিত ফন্ট পরিবারটি ব্যবহার করুন:

font-family: 'Open Sans', sans-serif;

এখন আপনি ফন্টটি যুক্ত করে কী "ওজন" রাখতে হবে তা স্থির করুন

আধা সাহসী জন্য

font-weight:600;

সাহসের জন্য (700)

font-weight:bold;

অতিরিক্ত সাহসের জন্য (800)

font-weight:800;

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

বেশ স্মার্ট :-)

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

উদাহরণস্বরূপ নীচের লিঙ্কটিতে 400 এবং 700 উভয় ওজন অন্তর্ভুক্ত থাকবে:

<link href='fonts.googleapis.com/css?family=Comfortaa:400,700'; rel='stylesheet' type='text/css'>

— মার্কো জোহানেনসেন
সূত্র

56

এটি আংশিক সত্য, এবং কারণ আপনি যদি লিঙ্ক সিএসএসের উপর ওজনকে আশ্বাস না দেন তবে গুগল এটি অর্জন করতে যথাযথ " গা bold় " ফর্ম্যাটটি ডাউনলোড করবেন না আপনাকে নীচের হিসাবে "লিঙ্ক href" ঘোষণা করতে হবে: <লিঙ্ক href = ' fouts.googleapis .কম / সিএসএস? পরিবার = কমফোর্টিয়া: 400,700 'rel =' স্টাইলশিট 'টাইপ =' পাঠ্য / সিএসএস '>

— এনকিউবিকা

3

আমার "পুরানো" সাহসের পুরানো নিয়মগুলির জন্য ব্রাউজারটি ওজন 600 ব্যবহার করার কোনও উপায় আছে কি? আমি মনে করি 700 খুব ঘন এবং এটি আমার সাইটে কোথাও চাই না।

— নিক কটরেল

আপনি কি বোঝাতে চেয়েছেন? আমার ধারণা আপনার সাহসী হওয়া উচিত 600 বয়সের? আপনি কি "সাহসী" আচরণটি পরিবর্তন করছেন <strong>এবং বোঝাতে চান <b>?

— মার্কো জোহানেনসেন

2

আমি @ ইম্পোর্ট ইউআরএল ব্যবহার করছি ( fouts.googleapis.com/css?family=Open+Sans:400,300 ); যেমন আমি এইচটিএমএল অ্যাক্সেস করতে পারি না এবং যখন আমি চেষ্টা করি এবং নিম্নলিখিতগুলি ব্যবহার করি ... ফন্ট-পরিবার: 'ওপেন সানস', সানস-সিরিফ; হরফ ওজন: 300; এটি ফন্টের ওজন পরিবর্তন করে না। ধারনা?

— টনি রে ট্যানসলে

@ টনিরেট্যান্সলে আপনার সিএসএস ফাইলের প্রথম লাইনে আছে? : আমি

— মার্কো জোহানসেন

11

এখানে সমস্যাটি রয়েছে: আপনি ফন্টের ওজন নির্দিষ্ট করতে পারবেন না যা গুগলের ফন্ট সেটে ফন্টে নেই। ফন্টের নীচে SEE SPECIMEN লিঙ্কটি ক্লিক করুন, তারপরে স্টাইলস বিভাগে স্ক্রোল করুন। সেখানে আপনি সেই নির্দিষ্ট ফন্টের জন্য উপলব্ধ প্রতিটি "স্টাইল" দেখতে পাবেন। দুঃখজনকভাবে গুগল প্রতিটি স্টাইলের জন্য সিএসএস ফন্টের ওজন তালিকা করে না। নামগুলি কীভাবে সিএসএস ফন্টের ওজন সংখ্যাগুলিতে মানচিত্র দেয়:

Thin            100     
Extra Light     200
Light           300
Regular         400
Medium          500
Semi-Bold       600
Bold            700
Black           900

নোট করুন যে খুব কম ফন্টগুলি সমস্ত 9 ওজনে আসে।

— NetFool
সূত্র

9

font-family:'Open Sans' , sans-serif;

আলোর জন্য: font-weight : 100; বা font-weight : lighter;

সাধারণ জন্য: font-weight : 500; বা font-weight : normal;

সাহসের জন্য: font-weight : 700; বা font-weight : bold;

আরও সাহসের জন্য: font-weight : 900; বা font-weight : bolder;

— প্রমেশ বাজরাচার্য
সূত্র

গ্রেট। তবে ফন্টটি ফন্ট-ওজনের চেয়ে হালকা হতে পারে: 100?

— জন ম্যাক্স

3

না, সর্বনিম্ন মানটি কেবলমাত্র 100 এবং সর্বোচ্চ মান 900

2

এটি সঠিক নয়, নিম্নলিখিত মানগুলি বিবেচনা করতে হবে: light: font-weight: 300; normal: font-weight: 400; semi-bold: font-weight: 600; bold: font-weight: 700; extra bold: font-weight: 800;

— জেরাল্ডো

2

আপনি গুগল ফন্টে উল্লিখিত ওজন মানটি ব্যবহার করতে পারেন।

body{
 font-family: 'Heebo', sans-serif;
 font-weight: 100;
}

— রিতম দাস
সূত্র