CSS পডকাস্ট - 036: টেক্সট এবং টাইপোগ্রাফি
টেক্সট ওয়েবের মূল বিল্ডিং ব্লকগুলির মধ্যে একটি।
একটি ওয়েবসাইট তৈরি করার সময়, আপনার পাঠ্যকে স্টাইল করার প্রয়োজন নেই; এইচটিএমএল আসলে কিছু বেশ যুক্তিসঙ্গত ডিফল্ট স্টাইলিং আছে.
যাইহোক, টেক্সট সম্ভবত আপনার ওয়েবসাইটের বেশিরভাগ অংশ তৈরি করবে, তাই এটিকে স্প্রুস করার জন্য কিছু স্টাইলিং যোগ করা সার্থক। কয়েকটি মৌলিক বৈশিষ্ট্য পরিবর্তন করে, আপনি আপনার ব্যবহারকারীদের পড়ার অভিজ্ঞতা উল্লেখযোগ্যভাবে উন্নত করতে পারেন!
এই মডিউলে, আমরা @font-face
নিয়ম দিয়ে শুরু করব, যা আপনাকে আপনার ওয়েবপৃষ্ঠাগুলিতে কাস্টম ফন্ট আমদানি করতে দেয়। এটি নিশ্চিত করে যে আপনার কাছে আপনার প্রয়োজনীয় সঠিক টাইপোগ্রাফি রয়েছে, ব্যবহারকারী-ইনস্টল করা ফন্টগুলি থেকে স্বাধীন।
এর পরে, আমরা font-family
, font-style
, font-weight
এবং font-size
সহ প্রয়োজনীয় CSS ফন্ট বৈশিষ্ট্যগুলি কভার করব। এই বেসিকগুলি স্টাইল এবং পঠনযোগ্যতা উভয়ের জন্য টেক্সট ম্যানিপুলেট করার পর্যায় সেট করে।
আমরা পরিবর্তনশীল ফন্ট এবং ছদ্ম-উপাদানগুলির মতো উন্নত বিষয়গুলির সাথে শেষ করার আগে text-indent
এবং word-spacing
মতো অনুচ্ছেদ-নির্দিষ্ট বৈশিষ্ট্যগুলিকে স্পর্শ করব, যা আপনার টাইপোগ্রাফিক নিয়ন্ত্রণকে আরও পরিমার্জিত করে।
এই CSS কৌশলগুলির আপনার বোঝাপড়া এবং প্রয়োগকে দৃঢ় করার জন্য ব্যবহারিক উদাহরণ এবং টিপস জুড়ে দেওয়া হবে।
@font-face
নিয়ম
@font-face
সিএসএস অ্যাট-রুল ওয়েব ডিজাইনে সহায়ক, আপনাকে পাঠ্য প্রদর্শনের জন্য কাস্টম ফন্ট নির্দিষ্ট করতে এবং ব্যবহার করতে দেয়। @font-face
এর সৌন্দর্য হল এর বহুমুখীতা: এটি আপনাকে দূরবর্তী সার্ভার থেকে বা ব্যবহারকারীর ডিভাইসে ইনস্টল করা ফন্ট থেকে হরফ উৎসর্গ করতে দেয়।
সিনট্যাক্স
@font-face {
font-family: "Trickster";
src:
local("Trickster"),
url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
url("trickster-outline.otf") format("opentype"),
url("trickster-outline.woff") format("woff")
}
বর্ণনাকারী
-
ascent-override
- বেসলাইনের উপরে স্থান প্রভাবিত করে, আরোহ মেট্রিক কাস্টমাইজ করে।
-
descent-override
- বেসলাইনের নিচের স্থানকে প্রভাবিত করে ডিসেন্ট মেট্রিক অ্যাডজাস্ট করে।
-
font-display
- ডাউনলোডের অবস্থার উপর নির্ভর করে ফন্টের প্রদর্শন আচরণ নিয়ন্ত্রণ করে।
-
font-family
- ফন্ট-সম্পর্কিত বৈশিষ্ট্যের মধ্যে ব্যবহারের জন্য ফন্টের নাম দেয়।
-
font-stretch
- গ্রহণযোগ্য অনুভূমিক স্কেলিং সেট করে, একটি একক মান বা ব্যাপ্তি হিসাবে নির্দিষ্ট করে৷
-
font-style
- তির্যক শৈলীর জন্য কোণ ব্যাপ্তি সমর্থনকারী ফন্ট শৈলী সংজ্ঞায়িত করে।
-
font-weight
- ফন্টের ওজন বা উপলব্ধ ওজনের পরিসীমা নির্ধারণ করে।
-
font-feature-settings
- OpenType ফন্ট বৈশিষ্ট্যগুলিতে অ্যাক্সেস সক্ষম করে৷
-
font-variation-settings
- পরিবর্তনশীল ফন্ট সেটিংসের উপর সূক্ষ্ম সুরক্ষিত নিয়ন্ত্রণ প্রদান করে।
-
line-gap-override
- ফন্টের ডিফল্ট লাইন ফাঁক ওভাররাইড করে।
-
size-adjust
- ফন্টের রূপরেখা এবং মেট্রিক্সে একটি স্কেলিং ফ্যাক্টর প্রয়োগ করে।
-
src
- স্থানীয় বা দূরবর্তী, ফন্ট উত্স সংজ্ঞায়িত করে।
@font-face
নিয়মের জন্য এটি প্রয়োজনীয়।src
এর মধ্যেurl()
এবংlocal()
একত্রিত করা একটি সাধারণ কৌশল যা একটি স্থানীয় ফন্ট ব্যবহার করে যদি উপলব্ধ থাকে, একটি দূরবর্তী ফন্ট ফাইলে একটি ফলব্যাক হিসাবে ফিরে যায়। ব্রাউজারগুলি ঘোষণার ক্রম অনুসারে সংস্থানগুলিকে অগ্রাধিকার দেয়, তাইlocal()
সাধারণতurl()
আগে থাকা উচিত। -
unicode-range
- এই ফন্টটি যে অক্ষরগুলির জন্য ব্যবহার করা উচিত তা সীমাবদ্ধ করে৷
বর্ণনা
@font-face
ডিজাইনারদের কাস্টম টাইপোগ্রাফি ব্যবহার করতে দিয়ে "ওয়েব-নিরাপদ" ফন্টের সীমাবদ্ধতা থেকে মুক্ত করে। local()
ফাংশন ব্যবহারকারীর ডিভাইসে একটি ফন্ট অনুসন্ধান করার ক্ষমতা একটি বিরামবিহীন অভিজ্ঞতা প্রদান করে যা অগত্যা একটি ইন্টারনেট সংযোগের উপর নির্ভর করে না।
ফন্ট MIME প্রকার
বিন্যাস | MIME প্রকার |
---|---|
ট্রু টাইপ | font/ttf |
ওপেন টাইপ | font/otf |
ওয়েব ওপেন ফন্ট ফরম্যাট | font/woff |
ওয়েব ওপেন ফন্ট ফরম্যাট 2 | font/woff2 |
@ফন্ট-ফেস এবং ফন্ট-পরিবারের মধ্যে পার্থক্য
CSS-এ, @font-face
এবং font-family
প্রায়ই বিভ্রান্ত হয়, কিন্তু তারা স্বতন্ত্র উদ্দেশ্য পূরণ করে।
যেমন আমরা আলোচনা করেছি, @font-face
হল একটি নিয়ম যা আপনি আপনার ওয়েব অ্যাপ্লিকেশনে ব্যবহার করতে চান এমন কোনো কাস্টম ফন্ট নির্ধারণ করতে ব্যবহৃত হয়। এটি ব্রাউজারকে বলে যে ফন্টটি কোথায় ডাউনলোড করতে হবে, লোড করার সময় কীভাবে এটি প্রদর্শন করতে হবে ( font-display
বৈশিষ্ট্য সহ), এবং অক্ষরের কোন উপসেট ডাউনলোড করতে হবে তা নির্দিষ্ট করে ( unicode-range
সহ)।
বিপরীতে, font-family
হল একটি CSS প্রপার্টি যা CSS নিয়মের মধ্যে একটি নির্দিষ্ট ফন্ট বা একটি উপাদানের ফন্টের তালিকা নির্ধারণ করতে ব্যবহৃত হয়। font-family
অধীনে তালিকাভুক্ত ফন্টগুলি ওয়েব-নিরাপদ ফন্ট, সিস্টেম ফন্ট বা @font-face
দিয়ে সংজ্ঞায়িত কাস্টম ফন্ট হতে পারে।
সংক্ষেপে বলা যায়, @font-face
একটি ফন্ট ঘোষণা করে এবং একটি নাম দেয় এবং font-family
এই ঘোষিত ফন্টটিকে HTML উপাদানগুলিতে প্রয়োগ করে৷
এখানে উভয় ব্যবহার করার একটি উদাহরণ:
<table>
<thead>
<tr>
<th><p><pre>
@font-face {
font-family: "CustomFont";
src: url("customfont.woff2") format("woff2");
}
body {
font-family: "CustomFont", Arial, sans-serif;
}
এই উদাহরণে, @font-face
"CustomFont" সংজ্ঞায়িত করে এবং ব্রাউজারকে বলে যে এটি কোথায় পাওয়া যাবে। "CustomFont" উপলভ্য না থাকলে font-family
প্রপার্টি এটিকে বডি এলিমেন্টে প্রয়োগ করে, এরিয়াল একটি ফলব্যাক হিসেবে।
টাইপফেস পরিবর্তন করুন
আপনার লেখার টাইপফেস পরিবর্তন করতে font-family
ব্যবহার করুন।
font-family
প্রপার্টি স্ট্রিংগুলির একটি কমা-বিভক্ত তালিকা গ্রহণ করে, হয় নির্দিষ্ট বা জেনেরিক ফন্ট পরিবারকে উল্লেখ করে। নির্দিষ্ট ফন্ট পরিবারগুলি উদ্ধৃত স্ট্রিং, যেমন "হেলভেটিকা", "ইবি গ্যারামন্ড", বা "টাইমস নিউ রোমান"। জেনেরিক ফন্ট পরিবারগুলি হল কীওয়ার্ড যেমন serif
, sans-serif
, এবং monospace
( MDN এ বিকল্পগুলির সম্পূর্ণ তালিকা খুঁজুন)। ব্রাউজার প্রদত্ত তালিকা থেকে প্রথম উপলব্ধ টাইপফেস প্রদর্শন করবে।
font-family
ব্যবহার করার সময়, ব্যবহারকারীর ব্রাউজারে আপনার পছন্দের ফন্ট না থাকলে আপনার অন্তত একটি জেনেরিক ফন্ট পরিবার নির্দিষ্ট করা উচিত। সাধারণত, ফলব্যাক জেনেরিক ফন্ট ফ্যামিলি আপনার পছন্দের ফন্টের মতো হওয়া উচিত: যদি font-family: "Helvetica"
(একটি সান-সেরিফ ফন্ট ফ্যামিলি) ব্যবহার করে, তাহলে আপনার ফলব্যাকটি মিলতে sans-serif
হওয়া উচিত।
তির্যক এবং তির্যক ফন্ট ব্যবহার করুন
পাঠ্যটি তির্যক হবে কি না তা সেট করতে font-style
ব্যবহার করুন। font-style
নিম্নলিখিত কীওয়ার্ডগুলির মধ্যে একটি গ্রহণ করে: normal
, italic
এবং oblique
।
টেক্সট বোল্ড করুন
পাঠ্যের "সাহস" সেট করতে font-weight
ব্যবহার করুন। এই বৈশিষ্ট্যটি কীওয়ার্ড মান ( normal
, bold
), আপেক্ষিক কীওয়ার্ড মান ( lighter
, bolder
), এবং সংখ্যাসূচক মান ( 100
থেকে 900
) গ্রহণ করে।
normal
এবং bold
কীওয়ার্ডগুলি যথাক্রমে 400
এবং 700
সংখ্যাসূচক মানের সমতুল্য।
lighter
এবং bolder
কীওয়ার্ডগুলি মূল উপাদানের সাপেক্ষে গণনা করা হয়। একটি সহজ চার্টের জন্য MDN এর আপেক্ষিক ওজনের অর্থ দেখুন কিভাবে এই মান নির্ধারণ করা হয়।
পাঠ্যের আকার পরিবর্তন করুন
আপনার পাঠ্য উপাদানের আকার নিয়ন্ত্রণ করতে font-size
ব্যবহার করুন। এই সম্পত্তি দৈর্ঘ্য মান, শতাংশ, এবং মুষ্টিমেয় কীওয়ার্ড মান গ্রহণ করে।
দৈর্ঘ্য এবং শতাংশের মান ছাড়াও, font-size
কিছু পরম কীওয়ার্ড মান ( xx-small
, x-small
, small
, medium
, large
, x-large
, xx-large
) এবং কয়েকটি আপেক্ষিক কীওয়ার্ড মান ( smaller
, larger
গ্রহণ করে ) আপেক্ষিক মানগুলি মূল উপাদানের font-size
সাথে আপেক্ষিক।
লাইনের মধ্যে স্থান পরিবর্তন করুন
একটি উপাদানের প্রতিটি লাইনের উচ্চতা নির্দিষ্ট করতে line-height
ব্যবহার করুন। এই বৈশিষ্ট্যটি হয় একটি সংখ্যা, দৈর্ঘ্য, শতাংশ বা normal
কীওয়ার্ড গ্রহণ করে। সাধারণত, উত্তরাধিকার সংক্রান্ত সমস্যা এড়াতে দৈর্ঘ্য বা শতাংশের পরিবর্তে একটি সংখ্যা ব্যবহার করার পরামর্শ দেওয়া হয়।
অক্ষর মধ্যে স্থান পরিবর্তন
আপনার পাঠ্যের অক্ষরের মধ্যে অনুভূমিক স্থানের পরিমাণ নিয়ন্ত্রণ করতে letter-spacing
ব্যবহার করুন। এই বৈশিষ্ট্যটি দৈর্ঘ্যের মান যেমন em
, px
, এবং rem
গ্রহণ করে।
উল্লেখ্য যে নির্দিষ্ট মান অক্ষরের মধ্যে প্রাকৃতিক স্থান পরিমাণ বৃদ্ধি করে । নিম্নলিখিত ডেমোতে, একটি পৃথক অক্ষর নির্বাচন করার চেষ্টা করুন এর লেটারবক্সের আকার এবং এটি কীভাবে letter-spacing
সাথে পরিবর্তিত হয় তা দেখতে।
শব্দের মধ্যে স্থান পরিবর্তন করুন
আপনার পাঠ্যের প্রতিটি শব্দের মধ্যে স্থানের দৈর্ঘ্য বাড়াতে বা কমাতে word-spacing
ব্যবহার করুন। এই বৈশিষ্ট্যটি দৈর্ঘ্যের মান যেমন em
, px
, এবং rem
গ্রহণ করে। মনে রাখবেন যে আপনার নির্দিষ্ট দৈর্ঘ্য স্বাভাবিক ব্যবধান ছাড়াও অতিরিক্ত স্থানের জন্য। এর মানে হল word-spacing: 0
word-spacing: normal
।
font
শর্টহ্যান্ড
আপনি একবারে অনেক ফন্ট-সম্পর্কিত বৈশিষ্ট্য সেট করতে শর্টহ্যান্ড font
বৈশিষ্ট্য ব্যবহার করতে পারেন। সম্ভাব্য বৈশিষ্ট্যের তালিকা হল font-family
, font-size
, font-stretch
, font-style
, font-variant
, font-weight
এবং line-height
।
এই বৈশিষ্ট্যগুলি কীভাবে অর্ডার করবেন তার সুনির্দিষ্ট বিবরণের জন্য MDN এর font
নিবন্ধটি দেখুন।
পাঠ্যের ক্ষেত্রে পরিবর্তন করুন
অন্তর্নিহিত HTML পরিবর্তন করার প্রয়োজন ছাড়াই আপনার পাঠ্যের ক্যাপিটালাইজেশন পরিবর্তন করতে text-transform
ব্যবহার করুন। এই সম্পত্তি নিম্নলিখিত কীওয়ার্ড মানগুলি গ্রহণ করে: uppercase
, lowercase
এবং capitalize
।
পাঠ্যে আন্ডারলাইন, ওভারলাইন এবং থ্রু-লাইন যোগ করুন
আপনার টেক্সটে লাইন যোগ করতে text-decoration
ব্যবহার করুন। আন্ডারলাইনগুলি সাধারণত ব্যবহার করা হয়, তবে আপনার পাঠ্যের উপরে বা সরাসরি এটির মাধ্যমে লাইন যুক্ত করা সম্ভব!
text-decoration
বৈশিষ্ট্য নীচে বিশদ বিবরণ আরো নির্দিষ্ট বৈশিষ্ট্য জন্য সংক্ষিপ্ত হয়.
text-decoration-line
বৈশিষ্ট্য underline
, overline
এবং line-through
কীওয়ার্ড গ্রহণ করে। আপনি একাধিক লাইনের জন্য একাধিক কীওয়ার্ডও নির্দিষ্ট করতে পারেন।
text-decoration-color
বৈশিষ্ট্য text-decoration-line
থেকে সমস্ত সজ্জার রঙ সেট করে।
text-decoration-style
প্রপার্টি solid
, double
, dotted
, dashed
এবং wavy
কীওয়ার্ড গ্রহণ করে।
text-decoration-thickness
বৈশিষ্ট্য যেকোনো দৈর্ঘ্যের মান গ্রহণ করে এবং text-decoration-line
থেকে সমস্ত সজ্জার স্ট্রোকের প্রস্থ সেট করে।
text-decoration
বৈশিষ্ট্য উপরের সমস্ত বৈশিষ্ট্যের জন্য একটি সংক্ষিপ্ত বিবরণ।
আপনার টেক্সট একটি ইন্ডেন্ট যোগ করুন
আপনার টেক্সট ব্লকে একটি ইন্ডেন্ট যোগ করতে text-indent
ব্যবহার করুন। এই বৈশিষ্ট্যটি হয় একটি দৈর্ঘ্য (উদাহরণস্বরূপ, 10px
, 2em
) বা ব্লকের প্রস্থের একটি শতাংশ নেয়।
উপচে পড়া বা লুকানো বিষয়বস্তু নিয়ে কাজ করুন
লুকানো বিষয়বস্তু কীভাবে উপস্থাপন করা হয় তা নির্দিষ্ট করতে text-overflow
ব্যবহার করুন। দুটি বিকল্প রয়েছে: clip
(ডিফল্ট), যা ওভারফ্লো বিন্দুতে পাঠ্যকে ছাঁটাই করে; এবং ellipsis
, যা ওভারফ্লো বিন্দুতে একটি উপবৃত্ত (...) প্রদর্শন করে।
হোয়াইট-স্পেস নিয়ন্ত্রণ করুন
white-space
প্রপার্টিটি নির্দিষ্ট করার জন্য ব্যবহার করা হয় কিভাবে একটি উপাদানের হোয়াইটস্পেস পরিচালনা করা উচিত। আরও বিশদ বিবরণের জন্য, MDN-এ white-space
নিবন্ধটি দেখুন।
white-space: pre
ASCII আর্ট রেন্ডার করার জন্য বা সাবধানে ইন্ডেন্ট করা কোড ব্লকের জন্য উপযোগী হতে পারে।
শব্দগুলি কীভাবে ভেঙে যায় তা নিয়ন্ত্রণ করুন
word-break
ব্যবহার করুন কীভাবে শব্দগুলিকে "ভাঙ্গা" করা উচিত যখন সেগুলি লাইনকে উপচে পড়বে। ডিফল্টরূপে, ব্রাউজার শব্দ বিভক্ত করবে না। word-break
এর জন্য break-all
কীওয়ার্ড ভ্যালু ব্যবহার করলে ব্রাউজারকে প্রয়োজনে পৃথক অক্ষরে শব্দ ভাঙতে নির্দেশ দেওয়া হবে।
পাঠ্য সারিবদ্ধকরণ পরিবর্তন করুন
একটি ব্লক বা টেবিল-কোষ উপাদানে পাঠ্যের অনুভূমিক প্রান্তিককরণ নির্দিষ্ট করতে text-align
ব্যবহার করুন। এই বৈশিষ্ট্য left
, right
, start
, end
, center
, justify
এবং match-parent
কীওয়ার্ড মানগুলি গ্রহণ করে।
left
এবং right
মানগুলি যথাক্রমে ব্লকের বাম এবং ডান দিকে পাঠ্যটিকে সারিবদ্ধ করে।
বর্তমান লেখার মোডে পাঠ্যের একটি লাইনের শুরু এবং শেষের অবস্থান উপস্থাপন করতে start
এবং end
ব্যবহার করুন। অতএব, ইংরেজিতে left
মানচিত্র start
এবং আরবি লিপিতে ডান থেকে right
লেখা আছে (RTL)। এগুলি লজিক্যাল অ্যালাইনমেন্ট, আমাদের লজিক্যাল বৈশিষ্ট্য মডিউলে আরও জানুন।
ব্লকের কেন্দ্রে পাঠ্য সারিবদ্ধ করতে center
ব্যবহার করুন।
justify
এর মান পাঠ্যকে সংগঠিত করে এবং স্বয়ংক্রিয়ভাবে শব্দ ব্যবধান পরিবর্তন করে যাতে পাঠ্যটি ব্লকের বাম এবং ডান উভয় প্রান্তের সাথে আপ হয়।
পাঠ্যের দিক পরিবর্তন করুন
আপনার পাঠ্যের দিকনির্দেশ সেট করতে direction
ব্যবহার করুন, হয় ltr
(বাম থেকে ডানে, ডিফল্ট) অথবা rtl
(ডান থেকে বামে)। আরবি, হিব্রু বা ফার্সি মত কিছু ভাষা ডান থেকে বামে লেখা হয়, তাই direction: rtl
ব্যবহার করা উচিত। ইংরেজি এবং অন্যান্য সমস্ত বাম-থেকে-ডান ভাষার জন্য, direction: ltr
।
পাঠ্যের প্রবাহ পরিবর্তন করুন
টেক্সট প্রবাহিত এবং সাজানো উপায় পরিবর্তন করতে writing-mode
ব্যবহার করুন। ডিফল্ট হল horizontal-tb
, কিন্তু আপনি writing-mode
vertical-lr
বা vertical-rl
এ সেট করতে পারেন যে পাঠ্য আপনি অনুভূমিকভাবে প্রবাহিত করতে চান।
পাঠ্যের অভিযোজন পরিবর্তন করুন
আপনার পাঠ্যের অক্ষরগুলির অভিযোজন নির্দিষ্ট করতে text-orientation
ব্যবহার করুন। এই সম্পত্তির জন্য বৈধ মানগুলি mixed
এবং upright
। এই বৈশিষ্ট্যটি তখনই প্রাসঙ্গিক যখন writing-mode
horizontal-tb
ছাড়া অন্য কিছুতে সেট করা হয়।
পাঠ্যে একটি ছায়া যোগ করুন
আপনার পাঠ্যে একটি ছায়া যোগ করতে text-shadow
ব্যবহার করুন। এই বৈশিষ্ট্যটি তিনটি দৈর্ঘ্য ( x-offset
, y-offset
এবং blur-radius
) এবং একটি রঙের প্রত্যাশা করে।
আরও জানার জন্য আমাদের ছায়ার মডিউলের text-shadow
বিভাগটি দেখুন।
পরিবর্তনশীল হরফ
সাধারণত, "স্বাভাবিক" ফন্টগুলির জন্য টাইপফেসের বিভিন্ন সংস্করণের জন্য বিভিন্ন ফাইল আমদানি করা প্রয়োজন, যেমন বোল্ড, ইটালিক বা ঘনীভূত। পরিবর্তনশীল ফন্ট হল এমন ফন্ট যা একটি ফাইলে একটি টাইপফেসের বিভিন্ন রূপ ধারণ করতে পারে।
আরো বিস্তারিত জানার জন্য পরিবর্তনশীল হরফ সম্পর্কে আমাদের নিবন্ধটি দেখুন।
ছদ্ম-উপাদান
::first-letter
এবং ::first-line
ছদ্ম-উপাদান
::first-letter
এবং ::first-line
ছদ্ম-উপাদানগুলি যথাক্রমে একটি পাঠ্য উপাদানের প্রথম অক্ষর এবং প্রথম লাইনকে লক্ষ্য করে।
::selection
ছদ্ম-উপাদান
ব্যবহারকারী-নির্বাচিত পাঠ্যের চেহারা পরিবর্তন করতে ::selection
ছদ্ম-উপাদান ব্যবহার করুন।
এই ছদ্ম-উপাদানটি ব্যবহার করার সময়, শুধুমাত্র নির্দিষ্ট CSS বৈশিষ্ট্যগুলি ব্যবহার করা যেতে পারে: color
, background-color
, text-decoration
, text-shadow
, stroke-color
, fill-color
, stroke-width
।
ফন্ট-ভেরিয়েন্ট
font-variant
প্রপার্টি হল অনেকগুলি CSS বৈশিষ্ট্যের জন্য একটি সংক্ষিপ্ত বিবরণ যা আপনাকে small-caps
এবং slashed-zero
মতো ফন্টের রূপগুলি বেছে নিতে দেয়। এই সংক্ষেপে CSS বৈশিষ্ট্যগুলি হল font-variant-alternates
, font-variant-caps
, font-variant-east-asian
, font-variant-ligatures
এবং font-variant-numeric
। প্রতিটি সম্পত্তির ব্যবহার সম্পর্কে আরও বিস্তারিত জানার জন্য লিঙ্কগুলি দেখুন।
আপনার উপলব্ধি পরীক্ষা করুন
ওয়েবে আপনার টাইপোগ্রাফির জ্ঞান পরীক্ষা করুন
নিচের কোন কীওয়ার্ডকে font-family
জেনেরিক ফলব্যাক হিসেবে ব্যবহার করা যেতে পারে?
serif
monospace
italic
italic
হল font-style
জন্য একটি বৈধ কীওয়ার্ড, font-family
নয়।sci-fi
fantasy
font-family
জন্য একটি বৈধ জেনেরিক ফলব্যাক।sans-serif
helvetica
"Helvetica"
একটি সাধারণ কীওয়ার্ড নয়, বরং এটি একটি নির্দিষ্ট ফন্ট পরিবারকে বোঝায়। প্রতিটি শব্দের প্রথম অক্ষরকে বড় হাতের অক্ষরে রূপান্তর করতে কোন বিবৃতি ব্যবহার করা হয়? যেমন This is a sentence.
➡ This Is A Sentence.
text-capitalize: true;
text-case: capitalize;
text-transform: capitalize;
font-style: capitals;
font-variant: capitalize;
সত্য বা মিথ্যা: পাঠ্যকে বাম, ডান বা কেন্দ্রে সারিবদ্ধ করতে text-orientation
ব্যবহার করুন।
text-orientation
একটি লাইনে অক্ষরের ঘূর্ণন পরিবর্তন করে।text-orientation
একটি লাইনে অক্ষরের ঘূর্ণন পরিবর্তন করে। বাম, ডান বা কেন্দ্রে পাঠ্য সারিবদ্ধ করতে text-align
ব্যবহার করুন (এবং আরও! )।পাঠ্যের লাইনের মধ্যে স্থান পরিবর্তন করতে কোন CSS সম্পত্তি ব্যবহার করা যেতে পারে?
line-spacing
leading
baseline-distance
line-height
সম্পদ
- ফন্টের সর্বোত্তম অনুশীলন ফন্ট আমদানি, ফন্ট রেন্ডারিং এবং ওয়েবে ফন্ট ব্যবহার করার জন্য অন্যান্য সর্বোত্তম অনুশীলন নিয়ে আলোচনা করে।
- MDN ফান্ডামেন্টাল টেক্সট এবং ফন্ট স্টাইলিং ।