The use of fonts
Note: If the font is made up of multiple words, quotation marks must be added
1.1 Define the font @font-face
refer to: Rookie Tutorial @font-face
<style>
@font-face {
/* custom font name */
font-family: 'pengsir';
/* Define multiple fonts Use the second font when the first font does not exist or is not recognized*/
src: url('font/font.TTF'),
url('font/freescpt.TTF');
}
span{
font-family: pengsir;
}
</style>
<body>
<span>test text abc</span>
</body>
Effect:
2. Font style
2.1 Word redefinition font-weight
Font weight refers to the definition of the thickness of a word. The value range is normal | bold | bolder | lighter | 100 ~900.
400 corresponds to normal,700 corresponds to bold , in general use bold or normal more.
Effect:
2.2 Font size font-size
- Font size is used to control the display size of characters, including xx-small | x-small | small | meidum | large | x-large | xx-large.
- percentage
- The percentage is the size of the child element relative to the parent element. For example, the parent element is 20px, and the child element is set to 200%, which is twice the size (40px) of your element.
- em
- The em unit is equivalent to the percent unit (which can be understood as the width of a word).
2.3 Line height setting line-height
Here is 1.5 times the line height, em can automatically adjust the line height according to the size of the word, so the line height is generally set to em
<style>
p{
line-height: 1.5em;
}
</style>
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis non blanditiis ab
architecto vel nulla cum, id laboriosam, ratione quo at repellendus maiores! Nemo
quis autem, perferendis fugiat vitae asperiores.
</p>
</body>
2.3 Font style font-style
both italic and oblique are oblique
<style>
body>em{
font-style: normal;
}
p:nth-of-type(1){
line-height: 1.5em;
font-style: italic;
}
p:nth-of-type(2){
line-height: 1.5em;
font-style:oblique;
}
</style>
<body>
<em>This is the default italic font</em>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis non blanditiis ab architecto vel nulla cum, id laboriosam, ratione quo at repellendus maiores! Nemo quis autem, perferendis fugiat vitae asperiores.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis non blanditiis ab architecto vel nulla cum, id laboriosam, ratione quo at repellendus maiores! Nemo quis autem, perferendis fugiat vitae asperiores.
</p>
</body>
Effect:
2.4 Combination font
The font shorthand property sets all font properties in one declaration.
The settable properties are (in order): "font-style font-variant font-weight font-size/line-height font-family"
The values for font-size and font-family are required. If other values are missing, the default value will be inserted, if any.
2.5 Case conversion font-variant or text-transform
- font-variant:samll-caps Convert lowercase to uppercase Re-enlarge and bold uppercase
- text-transform:capitalize capitalize words
- text-transform:lowercase all lowercase
- text-transform:uppercase converts all to uppercase
<style>
p:nth-of-type(1) {
font-variant: small-caps;
}
p:nth-of-type(2) {
text-transform: capitalize;
}
p:nth-of-type(3) {
text-transform:lowercase;
}
p:nth-of-type(4) {
text-transform:uppercase;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur cum atque quia harum alias dolorem. Sequi</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto placeat nobis provident eveniet laboriosam</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio quam cupiditate illo corrupti odit dolore vel unde</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio quam cupiditate illo corrupti odit dolore vel unde</p>
</body>
Effect:
2.6 Text line control text-decoration:
| value | describe |
|---|---|
| solid | Defaults. Lines will appear as single lines. |
| double | Lines will appear as double lines. |
| dotted | Lines will appear as dotted lines. |
| dashed | Lines will appear as dashed lines. |
| wavy | Lines will appear as wavy lines. |
Can't read? It has been filled out for you: Baidu translator
Attribute Definition and Instructions for Use
The text-decoration property is shorthand for the following three properties:
- text-decoration-line
- text-decoration-color
- text-decoration-style
<style>
h3:nth-of-type(1){
/*underscore*/
text-decoration: underline;
}
h3:nth-of-type(2){
/*overline*/
text-decoration:overline;
}
h3:nth-of-type(3){
/*strikethrough*/
text-decoration:line-through;
}
/* combination */
h1 {
text-decoration: underline overline line-through dotted red;
}
h2 {
text-decoration: underline overline wavy blue;
}
</style>
<body>
<h1>test text</h1>
<h2>test text</h2>
<h3>test text</h3>
<h3>test text</h3>
<h3>test text</h3>
</body>
Effect:
2.7 Text shadow text-shadow
text-shadow: h-shadow v-shadow blur color;
Note: The text-shadow property connects one or more shadow texts. Attributes are shadows, specified every 2 or 3 length values and an optional color value separated by commas. The length of the expired is 0.
<style>
h3{
text-shadow:rgba(255, 222, 12, .4) 5px 5px 1px,
rgba(0, 0, 255, 0.8) -5px -5px 1px;
}
</style>
<body>
<article>
<h3>test text</h3>
</article>
</body>
Effect:
2.8 blank processing pre or white-space
Use white-space to control text whitespace.
| Options | illustrate |
|---|---|
| pre | Preserves all whitespace in the text, similar to using the pre tag |
| nowrap | Disable text wrapping |
| pre-wrap | keep whitespace, keep newlines |
| pre-line | whitespace merge, preserve newlines |
<style>
h3:nth-of-type(1) {
white-space: pre;
}
h3:nth-of-type(2) {
white-space: pre-line;
}
h3:nth-of-type(3) {
white-space:pre-wrap;
}
</style>
<body>
<article>
<h3>test
text
</h3>
<h3>test
text
</h3>
<h3>test
text
</h3>
<pre>test
text
</pre>
</article>
</body>
Effect;
2.9 Text overflow processing white-space overflow text-overflow
The overflow property specifies what happens if the content overflows an element's box.
| value | describe |
|---|---|
| visible | Defaults. The content will not be trimmed and will be rendered outside the element box. (The horizontal or vertical scroll bar of the browser will appear) |
| hidden | The content is trimmed and the rest of the content is invisible. |
| scroll | The content is trimmed, but the browser displays scroll bars to view the rest of the content. |
| auto | If the content is trimmed, the browser displays scroll bars to view the rest of the content. |
text-overflow The text-overflow property specifies what should happen when text overflows the containing element.
| value | describe |
|---|---|
| clip | Trim text. |
| ellipsis | Displays ellipses to represent trimmed text. |
| string | Use the given string to represent the trimmed text. |
<style>
div:nth-of-type(1){
width: 20vw;
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
}
</style>
<body>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatum, cum placeat veniam consequatur eaque inventore nostrum ex, delectus omnis quibusdam illo voluptas quas sed explicabo nisi magni unde? Ullam.</div>
</body>
Effect:
2.10 Text indentation and alignment
2.10.1 Text indentation
text-indent:2em text indents 2 characters
2.10.2 Horizontal alignment
text-align:center center the text horizontally
2.10.3 Vertical Alignment
refer to: CSS vertical-align property
The vertical-align property sets the vertical alignment of an element.
This property defines the vertical alignment of the inline element's baseline relative to the baseline of the line in which the element is placed. Negative length and percentage values are allowed to be specified.
In table cells, this property sets the alignment of the cell contents in the cell box.
Example:
<style>
article h3{
font-size: 30px;
text-indent: 2em;
}
div img{
vertical-align: middle;
}
article div div{
display: inline-block;
vertical-align: bottom;
}
</style>
<body>
<article>
<h3>
This is a test text. This is a test text,This is a test text.
</h3>
<div>
<img src="https://picsum.photos/200/200" alt="">
<div>test text</div>
Laboris dolore cillum exercitation duis aliqua culpa commodo amet eiusmod ullamco sint.
</div>
</article>
</body>
The URL https://picsum.photos is used in the article, and he can return a random picture. If you are interested, you can take a look at Baidu.
Effect:
2.11 Letter spacing letter-spacing | word-spacing
letter-spacing
word-spacing
long word wrap
word-wrap:break-word
<style>
p:nth-of-type(1){
letter-spacing: 15px;
}
p:nth-of-type(2){
word-spacing: 20px;
}
p:nth-of-type(3){
border: 1px solid black;
width: 200px;
}
p:nth-of-type(4){
border: 1px solid black;
width: 200px;
/* Specify long words to wrap */
word-wrap: break-word;
}
</style>
<body>
<p>Nisi et dolore veniam reprehenderit duis ea nisi velit.</p>
<p>Nisi et dolore veniam reprehenderit duis ea nisi velit.</p>
<p>Nisi et dolore veniamveryveryveryveryveryveryveryverylongword reprehenderit duis ea nisi velit.</p>
<!-- long word wrap -->
<p>Nisi et dolore veniamveryveryveryveryveryveryveryverylongword reprehenderit duis ea nisi velit.</p>
</body>
Effect:
2.12 Typesetting method writing-mode
refer to: writing-mode property
writing-mode:horizontal-tb default, top to bottom
The default value is not demonstrated, it is the same
writing-mode: vertical-lr vertical direction left to right
writing-mode: vertical-rl vertical direction from right to left
