1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
---
title: টেক্সট স্টাইল
slug: Web/CSS/Getting_Started/Text_styles
tags:
- Beginer
- CSS
- 'CSS:Getting_Started'
- Guide
- NeedsLiveSample
- Web
translation_of: Learn/CSS/Styling_text/Fundamentals
translation_of_original: Web/Guide/CSS/Getting_started/Text_styles
---
<p>{{ CSSTutorialTOC() }}</p>
<p>{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}<span class="seoSummary">এটি হচ্ছে <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> এর ৭ম টীউটোরিয়াল, এখানে টক্সট স্টাইল এর অনেক উদাহরণ দেয়া আছে। একাহে বর্ণনা করা হয়েছে কিভাবে আপনি আপনার নমুনা stylesheet এ বিভিন্ন ফন্ট ব্যাবহার করবেন।</span></p>
<h2 class="clearLeft" id="তথ্য_টেক্সট_স্টাইল">তথ্য: টেক্সট স্টাইল</h2>
<p><span class="short_text" id="result_box" lang="bn"><span class="hps">সিএসএস</span> <span class="hps">স্টাইলিং</span> <span class="hps">লেখার জন্য</span> <span class="hps">বিভিন্ন</span> <span class="hps">ধরণ আছে।</span></span></p>
<p>এখানে {{ cssxref("font") }}আপনি আপনার লেখার বিভিন্ন দিক উল্লেখ করতে পারবেন,—যেমন:</p>
<ul>
<li><span class="short_text" id="result_box" lang="bn"><span class="hps">বোল্ড,</span> <span class="hps">ইটালিক,</span> <span class="hps">এবং ছোট</span> <span class="hps">হাতের অক্ষর</span></span> (<span class="short_text" id="result_box" lang="bn"><span class="hps"> ছোট</span> <span class="hps">হাতের অক্ষর</span></span>)</li>
<li>আকার</li>
<li><span class="short_text" id="result_box" lang="bn"><span class="hps">লাইন উচ্চতা</span></span></li>
<li>ফন্টের বিভিন্ন ধরণ</li>
</ul>
<div class="tuto_example">
<pre class="brush:css">উদাহরণ
p {font: italic 75%/125% "Comic Sans MS", cursive;}
</pre>
<p>এই নিয়মে বিভিন্ন ফন্টের ধরণ দেয়া আছে, <span id="result_box" lang="bn"><span>প্রতিটি</span> <span class="hps">অনুচ্ছেদ</span> এর লেখা হবে ইতালিক ফরমে।</span></p>
<p><span id="result_box" lang="bn"><span>প্রতিটি</span> <span class="hps">অনুচ্ছেদ</span> <span class="hps">এর মূল</span> <span class="hps">উপাদান</span> <span class="hps">আকার ফন্ট সাইজ <span id="result_box" lang="bn"><span class="hps">তিন চতুর্থাংশ</span> <span class="hps">সেট করা হয়েছে, <span id="result_box" lang="bn"><span>লাইন</span> <span class="hps">উচ্চতা</span> <span class="hps">১২৫%</span> <span class="hps">সেট করা হয়েছে।</span></span> </span></span></span></span>(<span id="result_box" lang="bn"><span>স্বাভাবিক তুলনায়</span> <span class="hps">একটু বেশি</span> <span class="hps">ব্যবধানযুক্ত</span></span>)।</p>
<p>Comic Sans MS এ,কিছু ফন্ট আকার সেট করা থাকে কিন্তু যদি তা গ্রহণ যোগ্য না হয় তবে ব্রাউজার ডিফল্ট কারসিভ (hand-written) আকার ব্যাবহার করতে পারবে।</p>
<p><span id="result_box" lang="bn"><span class="hps">এই নিয়মে</span> <span class="hps">বোল্ড এবং</span> <span class="hps">ছোট</span> <span class="hps">হাতের অক্ষরের</span></span> <span id="result_box" lang="bn"><span class="hps">পার্শ্ব প্রতিক্রিয়া</span> <span class="hps">আছে:</span></span>(setting them to <code>normal</code>):</p>
</div>
<h3 id="ফন্টের_আকার">ফন্টের আকার</h3>
<p>আপনি ভবিষৎ বানী করতে পারবেনা আপনার ডকুমেন্টি কোন ধরনের পাঠক পাবে। সুতরাং আপনি একটি উল্লেখযোগ্য ফন্টের আকার দিতে পারেন, সব থেকে ভাল হয় যদি আপনি পছন্দ অনুযায়ী একটি ফন্টের তালিকা দেন।</p>
<p>একটি ডিফল্ট আকার দিয়ে লিস্টটি শেষ করুনঃ <code>serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code> or <code>monospace</code>.</p>
<p>ডকুমেন্ট এ যদি কিছু ফন্ট আকার সমর্থন না করে তবে ব্রাউজার এ আপনি ফন্ট আকার প্রতিস্থাপন করতে পারেন। ডকুমেন্ট এ সমর্থন করে না এমন বিশেষ অক্ষর থাকতে পারে। যদি ব্রাউজার ঐই অক্ষরের কোন ফন্ট আকার খুজে পায় তবে আপনি সেটি ব্যাবহার করতে পারেন।</p>
<p>তার <span id="result_box" lang="bn"><span class="hps">নিজস্ব ফন্ট আকার উল্লেখ করার</span></span> {{ cssxref("font-family") }}এটি ব্যাবহার করুণ।</p>
<h3 id="ফন্টের_মাপ">ফন্টের মাপ</h3>
<p>ব্রাউজার ব্যাবহারকারি <span id="result_box" lang="bn"><span class="hps">পৃষ্ঠাটি পড়ার সময় ডিফল্ট ফন্টরে মার অথবা লেখার আকার পরিবর্তন করতে পারেন,তাই সবথেকে ভাল যদি আপনি একটি আপেক্ষিক মাপ ব্যাবহার করতে পারেন।</span></span></p>
<p><span id="result_box" lang="bn"><span class="hps">আপনি ফন্টের ভাল মাপের</span> <span class="hps">জন্য</span> <span class="hps">কিছু বিল্ট ইন</span> <span class="hps">মান ব্যবহার করতে পারেন,যেম্ন-বড়,ছোট এবং মাঝারি</span></span>।<span class="_5yl5"><span class="null"> আপনি চাইলে ওই মান গুলো ব্যবহার করতে পারেন যেগুলো মূল উপাদানের ফন্টের আকারের সাথে সম্পর্কিত, যেমন ছোট বড় , ১৫০% অথবা ১.৫ em।<span class="_5yl5"><span class="null">একটি "em" হচ্ছে "m" অক্ষরের সমান প্রস্থের(মূল উপাদানের ফন্টের আকারের জন্য); এইভাবে ১.৫em হচ্ছে মূল উপাদানের এক এবং অর্ধ আকার।</span></span></span></span></p>
<p>প্রয়োজনে আপনি একটি নিদ্রিষ্ট আকার , যেমন: <code>14px</code> (14 pixels) <span id="result_box" lang="bn"><span class="hps">ডিসপ্লে ডিভাইস</span> এর জন্য</span> অথবা 14pt (14 points) প্রিন্টারের জন্য নির্ধারণ করতে পারেন। <span id="result_box" lang="bn"><span class="hps">এটা</span> <span class="hps">তাদের পরিবর্তন</span> <span class="hps">করার অনুমতি দেয় না</span><span>, কারণ এইটা impaired ব্যাবহারকারিদের</span></span> জন্য <span id="result_box" lang="bn"><span class="hps">অ্যাক্সেসযোগ্য হয় না</span></span>। <span id="result_box" lang="bn"> <span class="hps">আরো ভাল</span> <span class="hps">কৌশল</span> <span class="hps">ডকুমেন্টের</span> <span class="hps">উপরের</span> <span class="hps">স্তরের</span> এবং <span class="hps">মাঝারিতে</span> <span class="hps">একটি বিল্ট-ইন</span> <span class="hps">মান সেট</span> <span class="hps">করা হয়,</span></span><span id="result_box" lang="bn"><span class="hps">এবং তারপর</span> <span class="hps">তার সমস্ত</span> <span class="hps">descendent</span> <span class="hps">উপাদানের জন্য</span> <span class="hps">আপেক্ষিক</span> <span class="hps">মাপ সেট করা হয়</span><span>।</span></span></p>
<p><span id="result_box" lang="bn"><span class="hps">তার নিজস্ব একটি</span> <span class="hps">ফন্ট সাইজ</span> <span class="hps">উল্লেখ করার জন্য</span></span> {{ cssxref("font-size") }}ব্যাবহার করুন।</p>
<h3 id="লাইনের_উচ্চতা"><span class="short_text" id="result_box" lang="bn"><span class="hps">লাইনের</span> <span class="hps">উচ্চতা</span></span></h3>
<p>লাইনের উচ্চতা ২টা লাইনের মধ্যকার স্পেস উল্লেখ করে। আপনার ডকুমেন্টে দীর্ঘ লাইনের অনুচ্ছেদ থাক্লে,বিশেষ করে ফন্টের রাকার যদি ছোট হয় তবে পড়ার সুবিধারতে স্বাভাবিকের থেকে একটু বড় স্পেস দিন।</p>
<p><span id="result_box" lang="bn"><span class="hps">তার নিজস্ব একটি</span> <span class="hps">লাইন উচ্চতা</span> <span class="hps">উল্লেখ করার জন্য</span></span>{{ cssxref("line-height") }} ব্যাবহার করুণ।</p>
<h3 id="সজ্জা"><span class="short_text" id="result_box" lang="bn"><span class="hps">সজ্জা</span></span></h3>
<p>{{ cssxref("text-decoration") }}<code> ব্যাবহার করে আপনি আন্দার-লাইন অথবা অনন্য ডেকোরেশন করতে পারেন।</code> <code>আপনি স্পষ্টভাবে</code> ডেকোরেশন অপসরণ করতেও এটি ব্যাবহার করতে পারেন।</p>
<h3 id="অন্যান্য_বৈশিষ্ট্য"><span class="short_text" id="result_box" lang="bn"><span class="hps">অন্যান্য</span> <span class="hps">বৈশিষ্ট্য</span></span></h3>
<p>Italic জন্য ব্যাবহার করুন {{ cssxref("font-style") }}<code>: italic;</code><br>
Bold জন্য ব্যাবহার করুন <code>{{ cssxref("font-weight") }}: bold;</code><br>
Small capitals জন্য ব্যাবহার করুন <code>{{ cssxref("font-variant") }}: small-caps;</code></p>
<p><span id="result_box" lang="bn"><span class="hps">পৃথকভাবে এই</span> গুলো <span class="hps">বন্ধ</span> <span class="hps">করার জন্য, আপনি</span> <span class="hps">স্বাভাবিক</span> <span class="hps">মান</span> <span class="hps">সুনির্দিষ্টভাবে উল্লেখ করুন</span></span>।</p>
<div class="tuto_details">
<div class="tuto_type">
<span class="short_text" id="result_box" lang="bn"><span class="hps">আরো বিস্তারিত</span></span></div>
<p><span id="result_box" lang="bn"><span class="hps">আপনি</span> <span class="hps">অন্য কোন উপায়ে</span>ও <span class="hps">বিভিন্ন</span> <span class="hps">টেক্সট স্টাইল</span> <span class="hps">নির্দিষ্ট করতে পারেন।</span></span></p>
<p><span id="result_box" lang="bn"><span class="hps">উদাহরণস্বরূপ, এখানে</span> <span class="hps">উল্লিখিত</span> <span class="hps">অন্য কিছু</span> মান আছে যা <span class="hps">আপনি ব্যবহার করতে পারেন</span>।</span></p>
<p>একটি জটিল স্টাইলশীট,shorthand <code>font</code> property এড়িয়ে চলে কারণ তার কিছু <span id="result_box" lang="bn"><span class="hps">পার্শ্ব প্রতিক্রিয়া আছে</span></span> (resetting other individual properties)।</p>
<p>আরো তথ্যের জন্য <a class="external" href="http://www.w3.org/TR/CSS21/fonts.html">Fonts</a> in the CSS Specification দেখতে পারেন। টেক্সট ডেকোরেশন এর আরো তথ্যের জন্য দেখুন <a class="external" href="http://www.w3.org/TR/CSS21/text.html">Text</a>।</p>
<p><span id="result_box" lang="bn"><span class="hps">আপনি</span> <span class="hps">ব্যবহারকারীদের সিস্টেমে</span> <span class="hps">ইনস্টল</span> <span class="hps">আকারেরউপর নির্ভর</span> <span class="hps">করতে না ছাইলে</span><span>, আপনি</span> <span class="hps">ব্যবহার করতে পারেন</span></span>{{ cssxref("@font-face") }}এটি একটি অনলাইন ফন্ট উল্লেখ করে। যদিও এই নিয়ম সমর্থন করে ব্যাবহারকারিদের এমন একটি ব্রাউজার থাকা প্রয়োজন।</p>
</div>
<h2 id="কর্ম_উল্লেখ_ফন্ট"><span class="short_text" id="result_box" lang="bn"><span class="hps">কর্ম:</span> <span class="hps">উল্লেখ</span> <span class="hps">ফন্ট</span></span></h2>
<p>একটি সহজ ডকুমেন্ট এর জন্য {{ HTMLElement("body") }} তে আপনি ফন্ট এবং ডকুমেন্ট এর বাকি সেটিংস সেট করতে পারেন।</p>
<ol>
<li><span class="short_text" id="result_box" lang="bn"><span class="hps">আপনার</span> <span class="hps">সিএসএস ফাইল</span> <span class="hps">সম্পাদনা করুন.</span></span></li>
<li><span lang="bn"><span class="hps">ডকুমেন্ট জুড়ে</span> <span class="hps">ফন্ট পরিবর্তন করতে</span> <span class="hps">নিম্নলিখিত</span> <span class="hps">নিয়ম</span> <span class="hps">যোগ করুন.</span></span> <span id="result_box" lang="bn"><span class="hps">সিএসএস</span> <span class="hps">ফাইল উপরে</span> <span class="hps">এটি একটি</span> <span class="hps">লজিক্যাল</span> <span class="hps">জায়গা</span><span>, কিন্তু আপনি যখন এখানে রাখবেন সেখানেও তার</span> <span class="hps">একই প্রভাব</span> পরবে<span class="hps">:</span></span>
<pre class="eval">body {font: 16px "Comic Sans MS", cursive;}
</pre>
</li>
<li><span class="_5yl5"><span class="null">একটি মন্তব্য যোগ করুন যেটি নিয়ম ব্যাখ্যা করে এবং একটি স্পেস দিন যাতে করে আপনার পছন্দের বিন্যাসের সাথে এটি মিলে যায়।</span></span></li>
<li><span id="result_box" lang="bn"><span class="hps">ফাইল সংরক্ষণ করুন</span> <span class="hps">এবং ফলাফল</span> <span class="hps">দেখতে আপনার ব্রাউজার</span> <span class="hps">রিফ্রেশ করুন।</span></span> যদি আপনার Comic Sans MS এ থাকা আকার অথবা হাতে লেখা itlic আকার সমর্থন না করে ,তবে আপনার ব্রাউজার অন্নক্স কোন আকার পছন্দ করতে পারেঃ<br>
<table style="border: 2px outset #36b; padding: 1em;">
<tbody>
<tr>
<td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
</tr>
<tr>
<td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
</tr>
</tbody>
</table>
</li>
<li>ব্রাউজার মেনুবার, <strong>View > Text Size > Increase</strong> (or <strong>View > Zoom > Zoom In</strong>) পছন্দ করতে পারে। <span id="result_box" lang="bn"><span class="hps">আপনি স্টাইল টি</span> <span class="hps">16</span> <span class="hps">পিক্সেল</span> <span class="hps">উল্লেখ</span> <span class="hps">যদিও</span><span>, ডকুমেন্ট</span> <span class="hps">পড়া</span> <span class="hps">একটি ব্যবহারকারী</span> <span class="hps">মাপ পরিবর্তন করতে পারেন</span></span>।</li>
</ol>
<div class="tuto_example">
Challenge
<p>Without changing anything else, make all six initial letters twice the size in the browser's default serif font:</p>
<table>
<tbody>
<tr>
<td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets</td>
</tr>
<tr>
<td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets</td>
</tr>
</tbody>
</table>
<div class="tuto_details" id="tutochallenge">
<div class="tuto_type">
Possible solution</div>
<p>Add the following style declaration to the <code>strong</code> rule:</p>
<pre class="brush: css"> font: 200% serif;
</pre>
If you use separate declarations for <code>font-size</code> and <code>font-family</code>, then the <code>font-style</code> setting on the first paragraph is <em>not</em> overridden.
<p> </p>
<a class="hideAnswer" href="#challenge">Hide solution</a></div>
<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div>
<h2 id="পরবর্তী">পরবর্তী ?</h2>
<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Color", "Color")}}<span id="result_box" lang="bn"><span class="hps">আপনার নমুনা</span> <span class="hps">ডকুমেন্ট</span> <span class="hps">ইতিমধ্যে</span> <span class="hps">বিভিন্ন</span> <span class="hps">নামে</span> <span class="hps">রং ব্যবহার করতে সক্ষম.</span></span> <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Color" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Color">The next section</a> দেয়া আছে রং এর তালিকা এবং কিভাবে আপনি রং প্রয়োগ করবেন।</p>
|
