CSS => टाइपोग्राफी

वाक्य - विन्यास

फ़ॉन्ट: [ फ़ॉन्ट-शैली ] [फ़ॉन्ट-संस्करण] [फ़ॉन्ट-वजन] फ़ॉन्ट-आकार [/ रेखा-ऊंचाई] फ़ॉन्ट-परिवार ;
फ़ॉन्ट-शैली: फ़ॉन्ट-शैली
font-variant: फॉन्ट-वेरिएंट
फ़ॉन्ट-वजन: फ़ॉन्ट-वजन ;
फ़ॉन्ट-आकार: फ़ॉन्ट-आकार ;
लाइन-ऊंचाई: लाइन-ऊंचाई ;
font-family: font-family ;
रंग: रंग ;
उद्धरण: कोई नहीं | स्ट्रिंग | प्रारंभिक | विरासत
फ़ॉन्ट-खिंचाव: फ़ॉन्ट-खिंचाव ;
text-align: text-align ;
पाठ-इंडेंट: लंबाई | प्रारंभिक | विरासत
पाठ-अतिप्रवाह: क्लिप | दीर्घवृत्त | स्ट्रिंग | प्रारंभिक | वंशानुक्रम
पाठ-परिवर्तन: कोई नहीं | बड़ा करें | अपरकेस | लोअरकेस | प्रारंभिक | वारिस
पाठ-छाया: एच-छाया वी-छाया कलंक-त्रिज्या रंग | कोई नहीं | प्रारंभिक | विरासत |
फ़ॉन्ट-आकार-समायोजन: संख्या | कोई नहीं | प्रारंभिक | वारिस
फ़ॉन्ट-स्ट्रेच: अति-संघनित | अतिरिक्त-संघनित | संघनित | अर्द्ध-संघनित | सामान्य | अर्ध-विस्तारित | अतिरिक्त-विस्तारित और अति-विस्तारित | प्रारंभिक | वंशानुक्रम |
हाइफ़न: कोई नहीं | मैनुअल | ऑटो ;
टैब-आकार: संख्या | लंबाई | प्रारंभिक | वारिस
पत्र-रिक्ति: सामान्य | लंबाई | प्रारंभिक | वारिस
शब्द-रिक्ति: सामान्य | लंबाई | प्रारंभिक | वारिस

पैरामीटर

पैरामीटर	विवरण
फ़ॉन्ट शैली	`italics` या `oblique`
font-संस्करण	`normal` या `small-caps`
फ़ॉन्ट वजन	100 से 900 तक `normal` , `bold` या न्यूमेरिक।
फ़ॉन्ट आकार	`%` , `px` , `em` , या किसी अन्य मान्य CSS माप में दिया गया फ़ॉन्ट आकार
ऊंची लाईन	`%` , `px` , `em` , या किसी अन्य मान्य CSS माप में दी गई लाइन की ऊँचाई
फ़ॉन्ट परिवार	यह परिवार के नाम को परिभाषित करने के लिए है।
रंग	कोई भी वैध सीएसएस रंग प्रतिनिधित्व , जैसे `red` , `#00FF00` , `hsl(240, 100%, 50%)` आदि।
font-खिंचाव	फ़ॉन्ट से गोपनीय या विस्तृत चेहरे का उपयोग करना है या नहीं। मान्य मूल्य `normal` , `ultra-condensed` , `extra-condensed` , `condensed` , `semi-condensed` , `semi-expanded` , `expanded` , `extra-expanded` या `ultra-expanded`
पाठ संरेखित	`start` , `end` , `left` , `right` , `center` , `justify` , `match-parent`
text-decoration	`none` , `underline` , `overline` , `line-through` , `initial` , `inherit` ;

टिप्पणियों

text-shadow प्रॉपर्टी 10 से कम इंटरनेट एक्सप्लोरर के संस्करणों द्वारा समर्थित नहीं है।

फ़ॉन्ट आकार

HTML:

<div id="element-one">Hello I am some text.</div>
<div id="element-two">Hello I am some smaller text.</div>

सीएसएस:

#element-one {
    font-size: 30px;   
}

#element-two {
    font-size: 10px;
}

#element-one अंदर का टेक्स्ट साइज में 30px होगा, जबकि #element-two में टेक्स्ट 10px साइज का होगा।

फ़ॉन्ट आशुलिपि

वाक्य रचना के साथ:

element {
    font: [font-style] [font-variant] [font-weight] [font-size/line-height] [font-family];
}

font आशुलिपि के साथ एक घोषणा में आप अपनी सभी फ़ॉन्ट-संबंधित शैली रख सकते हैं। बस font संपत्ति का उपयोग करें, और अपने मूल्यों को सही क्रम में रखें।

उदाहरण के लिए, सभी p तत्वों को 20px के फ़ॉन्ट आकार के साथ बोल्ड बनाने के लिए और एरियल को फ़ॉन्ट परिवार के रूप में उपयोग करने के लिए आमतौर पर आप इसे निम्नानुसार कोडित करेंगे:

p {
    font-weight: bold;
    font-size: 20px;
    font-family: Arial, sans-serif;
}

हालांकि फ़ॉन्ट आशुलिपि के साथ इसे निम्नानुसार संघनित किया जा सकता है:

p {
    font: bold 20px Arial, sans-serif;
}

नोट : चूंकि font-style , font-variant , font-weight और line-height वैकल्पिक हैं, इसलिए उनमें से तीन को इस उदाहरण में छोड़ दिया गया है। यह ध्यान रखें कि शॉर्टकट का उपयोग अन्य विशेषताओं नहीं दिया रीसेट करता है महत्वपूर्ण है। एक और महत्वपूर्ण बिंदु यह है कि फ़ॉन्ट शॉर्टकट के लिए काम करने के लिए दो आवश्यक गुण font-size और font-family । यदि वे दोनों शामिल नहीं हैं तो शॉर्टकट को नजरअंदाज कर दिया जाता है।

प्रत्येक गुण के लिए प्रारंभिक मूल्य:

font-style: normal;
font-variant: normal;
font-weight: normal;
font-stretch: normal;
font-size: medium;
line-height: normal;
font-family - उपयोगकर्ता एजेंट पर निर्भर करता है

फ़ॉन्ट ढेर

font-family: 'Segoe UI', Tahoma, sans-serif;

ब्राउज़र उपरोक्त संपत्ति द्वारा लक्षित तत्वों के भीतर फ़ॉन्ट चेहरा "सेगो यूआई" को लागू करने का प्रयास करेगा। यदि यह फ़ॉन्ट उपलब्ध नहीं है, या फ़ॉन्ट में आवश्यक वर्ण के लिए ग्लिफ़ नहीं है, तो ब्राउज़र वापस तहोमा पर गिर जाएगा, और यदि आवश्यक हो, तो उपयोगकर्ता के कंप्यूटर पर कोई भी सेन्स-सेरिफ़ फ़ॉन्ट। ध्यान दें कि "सेगो यूआई" जैसे एक से अधिक शब्दों वाले किसी भी फॉन्ट नाम के लिए उनके आसपास सिंगल या डबल कोट्स होना आवश्यक है।

font-family: Consolas, 'Courier New', monospace;

ब्राउज़र उपरोक्त संपत्ति द्वारा लक्षित तत्वों के भीतर फ़ॉन्ट चेहरे "कंसोल" को लागू करने का प्रयास करेगा। यदि यह फ़ॉन्ट उपलब्ध नहीं है, या फ़ॉन्ट में आवश्यक वर्ण के लिए ग्लिफ़ नहीं है, तो ब्राउज़र "कूरियर न्यू" पर वापस गिर जाएगा और, यदि आवश्यक हो, तो उपयोगकर्ता के कंप्यूटर पर कोई भी मोनोस्पेस फ़ॉन्ट।

पत्र अंतराल

h2 {
  /* adds a 1px space horizontally between each letter;
     also known as tracking */
  letter-spacing: 1px;
}

अक्षर-रिक्ति गुण का उपयोग किसी पाठ में वर्णों के बीच के स्थान को निर्दिष्ट करने के लिए किया जाता है।

! पत्र-रिक्ति भी नकारात्मक मूल्यों का समर्थन करती है:

p {
  letter-spacing: -1px;
}

संसाधन: https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing

पाठ रूपांतरण

text-transform प्रॉपर्टी आपको टेक्स्ट के कैपिटलाइज़ेशन को बदलने की अनुमति देती है। मान्य मूल्य हैं: uppercase , capitalize , lowercase , initial , inherit , और none

सीएसएस:

.example1 {
    text-transform: uppercase;
}
.example2 {
    text-transform: capitalize;
}
.example3 {
    text-transform: lowercase;
}

एचटीएमएल

<p class="example1">
    all letters in uppercase  <!-- "ALL LETTERS IN UPPERCASE" -->
</p>
<p class="example2">
    all letters in capitalize <!-- "All Letters In Capitalize (Sentence Case)" -->
</p>
<p class="example3">
    all letters in lowercase  <!-- "all letters in lowercase" -->
</p>

पाठ इंडेंट

p {
    text-indent: 50px;
}

text-indent संपत्ति निर्दिष्ट करती है कि किसी तत्व की पाठ सामग्री की पहली पंक्ति की शुरुआत से पहले कितना क्षैतिज स्थान पाठ स्थानांतरित किया जाना चाहिए।

संसाधन:

पाठ सजावट

text-decoration प्रॉपर्टी का इस्तेमाल text-decoration सेट करने या निकालने के लिए किया जाता है।

h1 { text-decoration: none; }
h2 { text-decoration: overline; }
h3 { text-decoration: line-through; }
h4 { text-decoration: underline; }

टेक्स्ट-डेकोरेशन का इस्तेमाल टेक्स्ट-डेकोरेशन-स्टाइल और टेक्स्ट-डेकोरेशन-कलर के साथ शॉर्टहैंड प्रॉपर्टी के रूप में किया जा सकता है:

.title { text-decoration: underline dotted blue; }

यह एक लघु संस्करण है

.title {
  text-decoration-style: dotted;
  text-decoration-line: underline;
  text-decoration-color: blue;
}

यह ध्यान दिया जाना चाहिए कि निम्नलिखित गुण केवल फ़ायरफ़ॉक्स में समर्थित हैं

text-decoration रंग
text-decoration ऑनलाइन
text-decoration शैली
text-decoration-छोड़

पाठ अतिप्रवाह

ओवरफ़्लो की गई सामग्री उपयोगकर्ताओं के लिए कैसे संकेतित होनी चाहिए, इसके बारे में text-overflow प्रॉपर्टी डील करती है। इस उदाहरण में, ellipsis कतरन पाठ का प्रतिनिधित्व करता है।

.text {
  overflow: hidden;
  text-overflow: ellipsis;
}

दुर्भाग्य से, text-overflow: ellipsis केवल पाठ की एक पंक्ति पर काम करता है। मानक सीएसएस में अंतिम पंक्ति पर दीर्घवृत्त का समर्थन करने का कोई तरीका नहीं है, लेकिन इसे फ्लेक्सबॉक्स के गैर-मानक वेबकिट-केवल कार्यान्वयन के साथ प्राप्त किया जा सकता है।

.giveMeEllipsis {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: N; /* number of lines to show */
   line-height: X;        /* fallback */
   max-height: X*N;       /* fallback */
}

उदाहरण (क्रोम या सफारी में खुला):

http://jsfiddle.net/csYjC/1131/

संसाधन:

https://www.w3.org/TR/2012/WD-css3-ui-20120117/#text-overflow0

शब्द रिक्ति

शब्द-रिक्ति गुण टैग और शब्दों के बीच रिक्ति व्यवहार को निर्दिष्ट करता है।

संभावित मान

एक सकारात्मक या नकारात्मक लंबाई ( em px vh cm आदि का उपयोग करके) या प्रतिशत ( % का उपयोग करके)
कीवर्ड normal फ़ॉन्ट के डिफ़ॉल्ट शब्द रिक्ति का उपयोग करता है
inherit कीवर्ड मूल तत्व से मान लेता है

सीएसएस

.normal    { word-spacing: normal; }
.narrow    { word-spacing: -3px; }
.extensive { word-spacing: 10px; }

एचटीएमएल

<p>
  <span class="normal">This is an example, showing the effect of "word-spacing".</span><br>
  <span class="narrow">This is an example, showing the effect of "word-spacing".</span><br>
  <span class="extensive">This is an example, showing the effect of "word-spacing".</span><br>
</p>

ऑनलाइन-डेमो

इसे स्वयं आज़माएं

आगे की पढाई:

पाठ की दिशा

div {
    direction: ltr; /* Default, text read read from left-to-right */
}
.ex {
    direction: rtl; /* text read from right-to-left */
}
.horizontal-tb {
    writing-mode: horizontal-tb; /* Default, text read from left-to-right and top-to-bottom. */
}
.vertical-rtl {
    writing-mode: vertical-rl; /* text read from right-to-left and top-to-bottom */
}
.vertical-ltr {
    writing-mode: vertical-rl; /* text read from left-to-right and top to bottom */
}

direction संपत्ति का उपयोग किसी तत्व की क्षैतिज पाठ दिशा को बदलने के लिए किया जाता है।

सिंटेक्स: direction: ltr | rtl | initial | inherit;

writing-mode संपत्ति पाठ के संरेखण को बदल देती है, इसलिए इसे भाषा के आधार पर ऊपर से नीचे या बाएं से दाएं से पढ़ा जा सकता है।

सिंटेक्स: direction: horizontal-tb | vertical-rl | vertical-lr;

फॉन्ट वेरिएंट

गुण:

साधारण

फोंट की डिफ़ॉल्ट विशेषता।

छोटी टोपियाँ

प्रत्येक अक्षर को अपरकेस पर सेट करता है, लेकिन निचले अक्षर (मूल पाठ से) को उन अक्षरों से छोटा बनाता है जो मूल रूप से अपरकेस हैं।

सीएसएस:

.smallcaps{
   font-variant: small-caps;
}

HTML:

<p class="smallcaps">
    Documentation about CSS Fonts
    <br>
    aNd ExAmpLe
</p>

ouput:

नोट: फॉन्ट-वेरिएंट प्रॉपर्टीज के लिए एक शॉर्टहैंड है: फॉन्ट-वेरिएंट-कैप्स, फॉन्ट-वेरिएंट-न्यूमेरिक, फॉन्ट-वेरिएंट-ऑल्टरनेट्स, फॉन्ट-वेरिएंट-लिगर्स और फॉन्ट-वेरिएंट-ईस्ट-एशियन।

उल्लेख। उद्धरण

quotes गुण <q> टैग के उद्धरण चिह्नों को खोलने और बंद करने के लिए उपयोग किया जाता है।

q {
    quotes: "«" "»";
}

पाठ की छाया

पाठ में छाया जोड़ने के लिए, text-shadow संपत्ति का उपयोग करें। सिंटैक्स निम्नानुसार है:

text-shadow: horizontal-offset vertical-offset blur color;

धब्बा त्रिज्या के बिना छाया

h1 {
  text-shadow: 2px 2px #0000FF;
}

यह एक हेडिंग के चारों ओर एक नीला छाया प्रभाव बनाता है

धुंधला त्रिज्या के साथ छाया

एक धब्बा प्रभाव जोड़ने के लिए, एक विकल्प blur radius तर्क जोड़ें

h1 {
  text-shadow: 2px 2px 10px #0000FF;
}

एकाधिक छाया

एक तत्व को कई छाया देने के लिए, उन्हें अल्पविराम से अलग करें

h1 {
    text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

Modified text is an extract of the original Stack Overflow Documentation

के तहत लाइसेंस प्राप्त है CC BY-SA 3.0

से संबद्ध नहीं है Stack Overflow

CSS
टाइपोग्राफी

खोज…