04Fonts and text styles

1.Text attributes

Text Properties - Overview

color specifies the color for the font

font-style is used to turn italic text on and off

font-weight sets the thickness of the font

font-size specifies the size of the text

font-family specifies a special font for text. The browser will only use fonts that the browser can access.

webFont web font

Font icon

text-decoration sets or cancels text decoration

text-align text arrangement

text-indent text indent property

text-transform sets or cancels font changes

text-shadow sets or cancels text shadow

- Color properties

How to modify text color through color attribute in CSS

Format: color: value;
Value:

• English vocabulary

​ Generally, common colors have corresponding English words, but the colors that can be expressed by English words are limited, which means that not all colors can be expressed by English words.

• rgb

​ rgb is actually the three primary colors, among which r(red red) g(green green) b(blue blue)
​ Format: rgb(0,0,0) ​The value of each number is between 0-255, 0 means no light, 255 means light, the larger the value, the brighter The third number is used to set the brightness of the blue display of the three primary color light source components ​The two numbers are used to set the brightness of the green display of the three primary color light source components ​ the first number is used to set the brightness of the red display of the three primary color light source components
​ Then in this format

​ Red: rgb(255,0,0);
​ Green: rgb(0,255,0);
​ Blue: rgb (0,0,255);
​ Black: rgb(0,0,0);
​ White: rgb(255,255,255);

​ In fact, black is not commonly used in front-end development
​ As long as the values ​​​​of red/green/blue are the same, it will be gray
​ And The smaller these three values ​​are, the more black they are; the larger they are, the more white they are
​ For example: color: rgb(200,200,200);

• rgba

​ The rgb in rgba is the same as explained before, except that there is one more a
​ So this a represents transparency, the value is 0-1, the smaller the value The more transparent it is
​ For example: color: rgba(255,0,0,0.2);

• hexadecimal

​ In front-end development, colors are represented by hexadecimal. In fact, the essence is RGB
​ In hexadecimal, one color is represented by every two digits
​ For example: #FFEE00 FF means R EE means G 00 means B

- font-style is used to turn italic text on and off

​ Format: font-style: italic;
​ Value:
​ normal: normal, the default is normal
​ italic: slanted
​ Shortcut keys:
​ fs font-style: italic;
​fsn font-style: normal;

- font-weight sets the thickness of the font

Format: font-weight: bold;
Value:
bold
bolder is thicker than bold
lighter thin line, the default is thin line
numeric value:
100 A number in the range of -900
400 is equivalent to normal
700 is equivalent to bold

​ 快捷键
​ fw font-weight:;
​ fwb font-weight: bold;
​ fwbr font-weight: bolder;

- font-size specifies the size of the text

​ Format: font-size: 30px;
​ Unit: px (pixel pixel)
​ Notes: Set the size through font-size You must bring the unit, that is, you must write px
​ Shortcut key
​ fz font-size:;
​ fz30 font-size: 30px;

- font-family specifies a special font for text. The browser will only use fonts that the browser can access.

​Format: font-family: "楷体";

​ Universal font (used directly, no quotation marks required)
​ serif: serif font, with special decorative lines or serifs at the end of the strokes< a i=2> sans-serif: sans-serif font, with smooth stroke ends monospace: fixed-width font, used for code, each word in the font has the same width a> ​ fantasy: decorative font, a font with special artistic effects ​ cursive: Cursive, some of these fonts have continuous strokes, and some have special italic effects.

​ Notes:
1. If the value is in Chinese, it needs to be enclosed in double quotes or single quotes, and multiple word combinations must also be added
2. The set font must be a font already installed in the user's computer
3. If the set font does not exist, the system will use the default font to display Song Dynasty by default< /span> ​a> Chinese: Songti/HeiTi/Microsoft Yahei English: “Times New Roman”/Arial 6. Supplementary: The most common fonts in enterprise development are as follows ​ Note: If you want to set a separate font for English in the interface, then the English font must be written in The front of Chinese ​ In other words, Chinese fonts can handle English, but English fonts cannot handle Chinese ​ All English fonts do not contain Chinese characters ​ All Chinese fonts contain English characters 5. If you want to set separate fonts for Chinese and English , what should I do? Format: font-family: "Font 1", "Alternative 1", …; ​ You can set alternatives for the font
​ 4. What if the font set does not exist, and we do not want to use the default font for display?

​ One more thing you need to know is that if the name is in English, it does not necessarily mean that it is an English font
​ Because Chinese fonts actually have their own English names, so whether it is a Chinese font mainly depends on Can it handle Chinese
​ Song SimSun
​ Heixi SimHei
​ Microsoft YaHeiMicrosoft YaHei

​ 空捷键
​ ff font-family:;

- Abbreviation format

​ Abbreviation format:
font:style weight size family;
For example:
font: italic bold 10px “楷体”;

​ Notes:
1. Some attribute values ​​in this abbreviation format can be omitted
sytle can be omitted
​ weight can be omitted
2. In this abbreviation format, the positions of style and weight can be exchanged
3. In this abbreviation format Some attribute values ​​in the format cannot be omitted
size cannot be omitted
family cannot be omitted
4.size and family cannot be placed randomly
Size must be written in front of family, and size and family must be written at the end of all attributes

- WebFont

https://www.ziti163.com/webfont/
When the corresponding font is not installed on the user's computer, webFont can load network fonts for display.

@font-face {
    
                
    font-family: 'myfont';          
    src: url(“/fonts/test.woff”), url("/fonts/test.ttf");       
}       
div {
    
               
    font-family: myfont;        
}
<div>        
  test  
</div>

- Font icon

​ When developing a website, you need a variety of small icons. If you require an artist to draw these icons, it may be troublesome. Then we can directly use the open source font icon library. These font icon libraries use the webFont principle. We Loading an icon is as simple as loading a font. You can control the size and color of the icon by controlling the font size and font color.
​ The more popular open source font icon libraries are
​ iconfont http://www.iconfont.cn/< /span>http://fontawesome.dashgame.com/
font-awesome

-iconfont usage steps

1. Open the iconfont website https://www.iconfont.cn/

2. Search for the icon you want to use

3. Add your favorite icons to the shopping cart, provided that you need to log in to iconfont

4. Open the shopping cart and download the code locally

5. After downloading, place the corresponding folder in the project directory

6. In the corresponding page, introduce iconfont.css through the link tag and use it directly according to the corresponding class name.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入对应的iconfont.css -->
  <link rel="stylesheet" href="./font_jcx62njyfg/iconfont.css">
</head>
<body>
  <!-- class="iconfont icon-xxx" 使用对应的图标即可-->
  <i class="iconfont icon-Flowerbud"></i>
</body>
</html>

-Iconfont multi-color icon usage steps

1. Search or select multi-color icons

2. Select the appropriate icon to add to the shopping cart

3. Add the icon to the project, no project is created

4. Select symbol in the project, generate an online link or download it locally

5. Quote the online js address and import it directly using the script tag; download it locally and introduce iconfont.js into the project.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 加入通用css代码（引入一次就行） */
    .icon {
      
      
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;	
    }
  </style>
  <!-- 线上 -->
  <script src="http://at.alicdn.com/t/font_2723033_a8d3feqyo3r.js"></script>
  <!-- 本地 -->
  <script src="./font_2723033_472uiy994m2/iconfont.js"></script>
</head>
<body>
  <!-- 挑选相应图标并获取类名，应用于页面 -->
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xianxingbingbao"></use>
  </svg>
</body>
</html>

-font-awesome usage steps (note the version)

https://fontawesome.dashgame.com/

- Properties of text decoration

Format: text-decoration: underline;
Value:
underline underline
line -through strikethrough
overline underline
none Nothing, the most common use is to remove the underline of hyperlinks< a i=6> ​ Shortcut keys: td text-decoration: none; tdu text-decoration: underline; tdl text-decoration: line-through; tdo text-decoration: overline;

- Text horizontal alignment properties

​ 格式: text-align: right;
​ 取值:
​ left 左
​ right 右
​ center 中
​ 快捷键
ta text-align: left;
​ tar text-align: right;
​ tac text-align: center;

- Properties for text indentation

Format: text-indent: 2em;
Value:
2em, which is the em unit, and one em represents one indent Text width
Shortcut keys
ti text-indent:;
ti2e text-indent: 2em;

- Set or cancel font changes

​ Used to make text appear in all uppercase or all lowercase

​ text-transform allows font changes and text transformations

none prevents any changes

​ uppercase Convert text to uppercase

​ lowercase Convert text to lowercase

capitalize converts the first letter of all words to uppercase

​ full-width Converts to something like a fixed-width font

- Font shadow

​ Format: text-shadow: h-shadow v-shadow blur color;
​ Value:
​ none: Cancel all shadows< /span> color: optional. The color of the shadow. blur: optional. Blurred distance. v-shadow: required. The position of the vertical shadow. Negative values ​​are allowed.
h-shadow: required. The position of the horizontal shadow. Negative values ​​are allowed.

2. List style

- Default style

​ The margin-top and margin-bottom of the ul and ol elements are both 16px (1em), and the padding-left is 40px (2.5em)
​ The li element has no default setting Blank (line spacing)
​ The margin-top and margin-bottom of the dl element are both 16px (1em), but there is no internal margin
​ The dd element The margin-left is 40px (2.5em)
​ The margin-top of the p element, and the margin-bottom is 16px (1em)

- list-style-type sets the list item flag type

​ Value:

​ none : No item marker is shown.
​ disc : A filled circle (default value)
​ circle : A hollow circle
​ square : A filled square
​ decimal : Decimal numbers，Beginning with 1
​ lower-roman : Lowercase roman numerals，E.g. i, ii, iii, iv, v…
​ upper-roman : Uppercase roman numerals，E.g. I, II, III, IV, V…
​ decimal-leading-zero : Decimal numbers，Padded by initial zeros，E.g. 01, 02, 03, … 98, 99
​ …

- list-style-position sets the position where the list item logo appears

​ Value:
​ outside: The list item mark appears outside the main block box
​ inside: The list item mark appears outside the main block Inside the box

- list-style-image Customize the list item flag

​ Value:
url(): Specify the icon position

- list-style

List style shorthand writing
Value:

[<type>][<image>][<position>]

The most commonly used one is list-style:none; set no style and customize the style through CSS.

3.Other styles

- line-height

​Set the line height of text. The value is absolute unit or relative unit.

- display

​Switching display mode

​ inline Display inline, width and height are invalid

block block level display, width and height are valid

​ inline-block In order to allow the element to not only occupy a line, but also to set the width and height, then inline block-level elements appear, and the width and height are valid at the same time when displayed inline.

none does not display and does not occupy screen space

​ flex telescopic box layout

- visibility

Show and hide

Hidden, taking up screen space

visible display

- opacity

​Transparency, a value between 0-1. When the value is 0, it is hidden and takes up screen space.

- overflow overflow processing

Hidden beyond content hiding

​ auto generates scroll bars beyond

scroll scroll bar

/* 默认值。内容不会被修剪，会呈现在元素框之外 */
overflow: visible;
/* 内容会被修剪，并且其余内容不可见 */
overflow: hidden;
/* 内容会被修剪，浏览器会显示滚动条以便查看其余内容 */
overflow: scroll;
/* 由浏览器定夺，如果内容被修剪，就会显示滚动条 */
overflow: auto;

- cursor

Specify the cursor style

default	Default cursor (usually an arrow)
auto	default. The cursor set by the browser.
crosshair	The cursor appears as a crosshair.
pointer	The cursor is rendered as a pointer indicating the link (a hand)
move	This cursor indicates that an object can be moved.
e-resize	This cursor indicates that the edge of the rectangular box can be moved to the right (east).
ne-resize	This cursor indicates that the edge of the rectangular box can be moved up and to the right (North/East).
nw-resize	This cursor indicates that the edge of the rectangular box can be moved up and to the left (North/West).
n-resize	This cursor indicates that the edge of the rectangular box can be moved up (north).
se-resize	This cursor indicates that the edge of the rectangular box can be moved down and to the right (south/east).
sw-resize	This cursor indicates that the edge of the rectangle can be moved down and to the left (south/west).
s-resize	This cursor indicates that the edge of the rectangular box can be moved downward (south).
w-resize	This cursor indicates that the edge of the rectangular box can be moved to the left (west).
text	This cursor indicates text.
wait	This cursor indicates that the program is busy (usually a watch or hourglass).
help	This cursor indicates available help (usually a question mark or a balloon).