CSS ফন্ট

সিএসএস ফন্ট প্রতিশব্দ নিবন্ধের ফন্ট পরিবার, মাপ, বৃদ্ধি, শৈলী (যেমন আকর্ষণীয়) এবং রূপান্তর (যেমন ক্ষুদ্র বড়লিপি) নির্দিষ্ট করে。

CSS ফন্ট শ্রেণী

在 CSS 中，有两种不同类型的字体系列名称：

  • 通用字体系列 - 拥有相似外观的字体系统组合（比如 "Serif" 或 "Monospace"）
  • 特定字体系列 - 具体的字体系列（比如 "Times" 或 "Courier"）

除了各种特定的字体系列外，CSS 定义了 5 种通用字体系列：

  • Serif 字体
  • Sans-serif 字体
  • Monospace 字体
  • Cursive 字体
  • Fantasy 字体

如果需要了解更多有关字体系列的知识，请阅读 CSS ফন্ট শ্রেণী。

指定字体系列

使用 font-family 属性 定义文本的字体系列。

使用通用字体系列

如果你希望文档使用一种 sans-serif 字体，但是你并不关心是哪一种字体，以下就是一个合适的声明：

body {font-family: sans-serif;}

亲自试一试

这样用户代理就会从 sans-serif 字体系列中选择一个字体（如 Helvetica），并将其应用到 body 元素。因为有继承，这种字体选择还将应用到 body 元素中包含的所有元素，除非有一种更特定的选择器将其覆盖。

指定字体系列

除了使用通用的字体系列，您还可以通过 font-family 属性设置更具体的字体。

下面的例子为所有 h1 元素设置了 Georgia 字体：

h1 {font-family: Georgia;}

亲自试一试

这样的规则同时会产生另外一个问题，如果用户代理上没有安装 Georgia 字体，就只能使用用户代理的默认字体来显示 h1 元素。

我们可以通过结合特定字体名和通用字体系列来解决这个问题：

h1 {font-family: Georgia, serif;}

亲自试一试

如果读者没有安装 Georgia，但安装了 Times 字体（serif 字体系列中的一种字体），用户代理就可能对 h1 元素使用 Times。尽管 Times 与 Georgia 并不完全匹配，但至少足够接近。

因此，我们建议在所有 font-family 规则中都提供一个通用字体系列。这样就提供了一条后路，在用户代理无法提供与规则匹配的特定字体时，就可以选择一个候选字体。

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

p {font-family: Times, TimesNR, 'New Century Schoolbook',}}
     Georgia, 'New York', serif;}

亲自试一试

এই তালিকা অনুযায়ী, ব্যবহারকারী এজেন্ট এই ফন্টগুলির মধ্যে ক্রমানুসারে অনুসন্ধান করবে। যদি তালিকায় উল্লেখিত সমস্ত ফন্টই উপলব্ধ না হয়, তবে সরাসরি উপলব্ধ একটি serif ফন্ট বেছে নেবে。

সিংহাতা ব্যবহার

আপনি হয়তো লক্ষ্য করেছেন যে, উপরের উদাহরণে সিংহাতা ব্যবহার করা হয়েছে। শুধুমাত্র যখন ফন্ট নামের মধ্যে একটি কিংবা একাধিক স্পেস (যেমন New York) থাকে, বা যখন ফন্ট নামটিতে # বা $-এর মতো সংকেত থাকে, font-family ঘোষণায় সিংহাতা যোগ করতে হবে。

একটি সিংহাতা বা দ্বৈত সিংহাতা গ্রহণযোগ্য, কিন্তু HTML এর style অতিভূত্যা একটি font-family অতিভূত্যা যখন, এই অতিভূত্যা ব্যবহার না করা সিংহাতা ব্যবহার করতে হবে:

<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,</p>
 'New York', serif;">...</p>

亲自试一试

ফন্ট শৈলী

font-style অতিভূত্যাসর্বাধিক ব্যবহৃত হয় কালি লেখা নির্ধারণের জন্য。

এই অতিভূত্যা তিনটি মান রয়েছে:

  • normal - লেখা সাধারণ দেখা যাবে
  • italic - লেখা ছোট ক্যাপস দেখা যাবে
  • oblique - লেখা ঢালিত দেখা যাবে

实例

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

亲自试一试

italic এবং oblique এর পার্থক্য

font-style অত্যন্ত সরল: normal, italic, এবং oblique লেখার মধ্যে বেছে নেওয়ার জন্য ব্যবহৃত হয়। একমাত্র জটিল বিষয় হল, italic এবং oblique লেখার মধ্যে পার্থক্য স্পষ্ট করা。

ছোট ক্যাপস একটি সহজ ফন্ট শৈলী, যা প্রত্যেক অক্ষরের গঠনে কিছু ছোট পরিবর্তন করে, যাতে পরিবর্তিত দেখবে। এর বিপরীতে, oblique লেখা সাধারণ উচ্চাকার লেখার একটি ঢালিত সংস্করণ।

সাধারণত, italic এবং oblique লেখা web ব্রাউজারে একইভাবে দেখা যায়。

ফন্ট রূপান্তর

font-variant অতিভূত্যাছোট ক্যাপস সেট করা যেতে পারে。

ছোট ক্যাপস সাধারণ ক্যাপস নয়, নয় ছোট অক্ষর, এই অক্ষরগুলি ভিন্ন মাত্রার ক্যাপস ব্যবহার করে।

实例

p {font-variant:small-caps;}

亲自试一试

ফন্ট বোল্ড

font-weight অ্যাট্রিবিউটটেক্সটের বোল্ডনেস সেট করা

bold শব্দটি ব্যবহার করে টেক্সটকে বোল্ড করা

শব্দ ১০০ ~ ৯০০ ফন্ট বোল্ডনেস নির্দিষ্ট করে। একটি ফন্টের মধ্যে এই বোল্ড স্তরগুলি বৈদ্যুতিকভাবে ম্যাপ করা, ১০০ সর্বনিম্ন ফন্ট বোল্ডনেস, ৯০০ সর্বোচ্চ ফন্ট বোল্ডনেস। সংখ্যা ৪০০ সর্বনিম্ন 'normal' এবং ৭০০ 'bold' হিসাবে ব্যবহৃত

যদি এলিমেন্টটির বোল্ড হিসাবে সেট করা হয়, তবে ব্রাউজার উত্তরবর্তী মানের তুলনায় আরও বোল্ড ফন্ট ব্যবহার করবে। এর বিপরীতে, 'lighter' শব্দটি ব্রাউজারকে বোল্ড হার নিচে নিয়ে যাবে না উপরে যাবে

实例

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

亲自试一试

ফন্ট সাইজ

font-size অ্যাট্রিবিউটটেক্সট সাইজ সেট করা

ওয়েব ডিজাইনের ক্ষেত্রে, টেক্সট সাইজ পরিবর্তন করার ক্ষমতা অত্যন্ত গুরুত্বপূর্ণ, কিন্তু আপনি পারাগ্রাফটিকে শিরোনাম হিসাবে দেখানোর জন্য টেক্সট সাইজ সাজানো করবেন না বা শিরোনামকে পারাগ্রাফটিকে দেখানোর জন্য

সবসময় সঠিক HTML শিরোনাম ব্যবহার করুন, যেমন <h1> - <h6> শিরোনাম টাগ ব্যবহার করুন, <p> টাগ ব্যবহার করে অনুচ্ছেদ টাগ করুন

font-size মান সুনির্দিষ্ট বা সম্পর্কিত মান হতে পারে

সুনির্দিষ্ট মান:

  • টেক্সটকে নির্দিষ্ট সাইজ সেট করা
  • সমস্ত ব্রাউজারে টেক্সট সাইজ পরিবর্তনের অনুমতি না দেওয়া (ব্যবহারিকতা অপকৃত)
  • সুনির্দিষ্ট ফিজিক্যাল মাপ নির্ধারণ করার জন্য সুনির্দিষ্ট সাইজ অত্যন্ত সাহায্যকারী

সম্পর্কিত সাইজ:

  • আশেপাশের ইলেকট্রনিক সাজানোর সাথে সাজানো
  • ব্রাউজারের মাধ্যমে টেক্সট সাইজ পরিবর্তনের অনুমতি দেওয়া

নোট:আপনি ফন্ট সাইজ নির্দিষ্ট করলে, সাধারণ টেক্সট (যেমন, অনুচ্ছেদ) এর ডিফল্ট সাইজ ১৬ পিক্সেল (১৬px=১em)।

পিক্সেল একক ব্যবহার করে ফন্ট সাইজ সেট করা

পিক্সেলের মাধ্যমে টেক্সট সাইজ সেট করার মাধ্যমে, টেক্সট সাইজ সম্পূর্ণরূপে নিয়ন্ত্রণ করা যায়:

实例

h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}

亲自试一试

ফায়ারফক্স, চ্রোম, এবং স্যাফারিতে, উপরোক্ত উদাহরণের টেক্সট সাইজ সাজানো সম্ভব, কিন্তু ইন্টারনেট এক্সলুয়ার এক্সপ্লোরারে না

ব্রাউজারের জয়াজ টুল ব্যবহার করে টেক্সট সাইজ সাজানো সম্ভব, কিন্তু এটা মূলত পৃষ্ঠার সার্বিক সাজানো, না কেবল টেক্সট

ইম একক ব্যবহার করে ফন্ট সাইজ সেট করা

ইন্টারনেট এক্সলুয়ার এক্সপ্লোরারে লিখিত টেক্সট সাজানোর সমস্যা এড়াতে, অনেক ডেভেলপার ইম ইউনিট ব্যবহার করেন।

W3C 推荐使用 em 尺寸单位。

1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。

浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。

可以使用下面这个公式将像素转换为 em：pixels/16=em

（注：16 等于父元素的默认字体大小，假设父元素的 font-size 为 20px，那么公式需改为：pixels/20=em）

实例

h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;}  /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */

亲自试一试

在上面的例子中，以 em 为单位的文本大小与前一个例子中以像素计的文本是相同的。不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小。

不幸的是，在 IE 中仍存在问题。在重设文本大小时，会比正常的尺寸更大或更小。

结合使用百分比和 EM

在所有浏览器中均有效的方案是为 body 元素（父元素）以百分比设置默认的 font-size 值：

实例

body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}

亲自试一试

我们的代码非常有效。在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。

CSS ফন্ট উদাহরণ:

টেক্সটের ফন্ট সেট করা
এই উদাহরণ দেখিয়েছে কিভাবে টেক্সট ফন্ট সেট করা যায়。
ফন্টের মাপ সেট করা
এই উদাহরণ দেখিয়েছে কিভাবে ফন্টের মাপ সেট করা যায়。
ফন্টের শৈলী সেট করা
এই উদাহরণ দেখিয়েছে কিভাবে ফন্টের শৈলী সেট করা যায়。
ফন্টের বৈশিষ্ট্য সেট করা
এই উদাহরণ দেখিয়েছে কিভাবে ফন্টের বৈশিষ্ট্য সেট করা যায়。
ফন্টের গঠন সেট করা
এই উদাহরণ দেখিয়েছে কিভাবে ফন্টের গঠনকে সেট করা যায়。
সবগুলি ফন্ট বৈশিষ্ট্য একটি ঘোষণাতে
এই উদাহরণ দেখিয়েছে কিভাবে সংক্ষিপ্ত বৈশিষ্ট্য ব্যবহার করে ফন্ট বৈশিষ্ট্যকে একটি ঘোষণাতে সেট করা যায়。

CSS ফন্ট বৈশিষ্ট্য

বৈশিষ্ট্য বর্ণনা
font সংক্ষিপ্ত বৈশিষ্ট্য।এর কাজ হল সবগুলি ফন্ট বৈশিষ্ট্যকে একটি ঘোষণাতে সেট করা।
font-family ফন্ট শ্রেণী সংযোজন
font-size ফন্টের মাপ সংযোজন
font-size-adjust প্রথম পছন্দ ফন্ট উপলব্ধ না হলে, প্রতিস্থাপন ফন্টকে স্মার্ট সময়সীমা সমায়োজন করা (CSS2.1 এই এট্রিবিউট বাতিল করা হয়েছে)。
font-stretch ফন্টকে হলচুলা বা সাধারণ ফন্টে প্রকাশ করা (CSS2.1 এই এট্রিবিউট বাতিল করা হয়েছে)。
font-style ফন্টের শৈলী সংযোজন
font-variant ছোট বড় বলে বা সাধারণ ফন্টে লেখা প্রকাশ করা
font-weight ফন্টের গঠনশৈলী সংযোজন