前端——CSS字体&文本

字体：

字体是对页面显示的字体进行一个设置，如选择字体，加粗或者斜体。

1. 通用字体

在 CSS 中，有五个通用字体族：

  • 衬线字体（Serif）- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
  • 无衬线字体（Sans-serif）- 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。
  • 等宽字体（Monospace）- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
  • 草书字体（Cursive）- 模仿了人类的笔迹。
  • 幻想字体（Fantasy）- 是装饰性/俏皮的字体。

 2. 字体属性：

  • 简写字体属性

　　font 属性是以下属性的简写属性：

  1. font-style
  2. font-variant
  3. font-weight
  4. font-size/line-height
  5. font-family
p.a {
  font :  20px Arial ,  sans-serif ;
}

p.b {
  font :  italic small-caps bold 12px / 30px Georgia,  serif ;
}

  • font-family（设置字体）
  1. font-family 属性应包含多个字体名称作为“后备”系统，以确保浏览器/操作系统之间的最大兼容性
  2. 请以您需要的字体开始，并以通用系列结束（如果没有其他可用字体，则让浏览器选择通用系列中的相似字体）。字体名称应以逗号分隔。
  3. 如果字体名称不止一个单词，则必须用引号引起来，例如："Times New Roman"。
  4. 可以使用 Google Fonts API 向页面添加数百种其他字体
.p 1 {
  font-family :  "Times New Roman" , Times,  serif ;
}

 





    

  • 

    font-size（字体大小）
    

    • 



    

  1. px：绝对尺寸     em：相对尺寸     %：百分比     vw：视口宽度”（"viewport width"）
    2. 

  2. 绝对尺寸不管在多少寸的屏幕中，始终保持设置的大小，浏览器中的默认文本大小为 16px。
    3. 

  3. 当设置相对尺寸时，对该合资进行大小的调整，默认大小 1em 为 16px
    4. 

  4. vw尺寸将遵循浏览器窗口的大小，请调整浏览器窗口的大小，以查看字体大小如何缩放。视口（Viewport）是浏览器窗口的大小。 1vw = 视口宽度的 1％。如果视口为 50 厘米宽，则 1vw 为 0.5 厘米。
    5. 









    

  • 

    font-style（字体样式）
    

    • 



    

  1. normal - 文字正常显示
    2. 

  2. italic - 文本以斜体显示
    3. 









    

  • 

    font-weight（字体粗细）
    

    • 



    

  1. normal：正常粗细
    2. 

  2. lighter：细字体
    3. 

  3. bold：粗字体
    4. 

  4. weight：可以设置字体粗细程度300-900
    5. 









    

  • 

    font-variant（字体变体）
    

    • 



    

  1. small-caps：英文大写，首字母正常，其他缩小
    2. 



在 small-caps 字体中，所有小写字母都将转换为大写字母。但是，转换后的大写字母的字体大小小于文本中原始大写字母的字体大小。








文本：


文本是对一段文字的显示方式进行一个调试。颜色，对齐方式等。


    

  • 

    color（文本颜色）
    

    • 



    

  1. 页面的默认文本颜色是在 body 选择器中定义的。
    2. 





h 1 {
  color :  green ;
}




    

  • 

    background-color（背景颜色）
    

    • 





h 1 {
  background-color :  black ;
  color :  white ;
}




    

  • 

    text-align（文本对齐）
    

    • 



    

  1. 

    用于设置文本的水平对齐方式。
    

    2. 





h 1 {
  text-align :  center ;
}
h 2 {
  text-align :  left ;
}
h 3 {
  text-align :  right ;
}




    

  • 

    justify（文本等宽）
    

    • 



    

  1. 将拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的（就像在杂志和报纸中）、
    2. 











    

  • 

    direction和unicode-bidi（文本方向）
    

    • 



    

  1. 更改元素的文本方向
    2. 











    

  • 

     vertical-align（垂直对齐）
    

    • 



    

  1. 属性设置元素的垂直对齐方式。
    2. 









　


    

  • 

     text-decoration（文本装饰）
    

    • 



    

  1. text-decoration: none;    连接删除下划线
    2. 

  2. text-decoration: overline  顶部下划线
    3. 

  3. text-decoration: line-through;  中心线（删除线）
    4. 

  4. text-decoration: underline;   底部下划线
    5. 











    

  • 

     text-transform（文本转换）
    

    • 



    

  1. 

    text-transform: uppercase; 全部字母大写
    

    2. 

  2. 

    text-transform: lowercase; 全部字母小写
    

    3. 

  3. 

    text-transform: capitalize; 首字母大写
    

    4. 











    

  • 

    text-indent（文字缩进）
    

    • 



    

  1. 指文字第一行的缩进，一般使用em来进行
    2. 









    

  • 

    letter-spacing（字母间距）
    

    • 



    

  1. 用于指定文本中字符之间的间距。
    2. 











    

  • 

    line-height（文本行高）
    

    • 



    

  1. 用于指定行之间的间距
    2. 

  2. 大多数浏览器中的默认行高大概是 110% 到 120%。
    3. 











    

  • 

    word-spacing（文字间距）
    

    • 



    

  1. 用于指定文本中单词之间的间距
    2. 











    

  • 

    white-space（文本空白）
    

    • 



    

  1. 元素内部空白的处理方式。（目前来看是不会进行分行处理，全部在一行显示）
    2. 





p {
  white-space :  nowrap ;
}






    

  • 

     text-shadow（文本阴影）
    

    • 



    

  1. 水平，垂直，模糊效果，颜色
    2. 





h 1 {
  text-shadow :  2px 2px 5px red ;
}






文本&图像的水平垂直居中:


1. 使用padding和text-aling：center


.center {
  padding: 70px 0;
  border: 3px solid green;
  text-align: center;
}


2. 使用height和line-height


.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}
/* 如果有多行文本，请添加如下代码：*/
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}


3. 使用position和transform


.center { 
  height: 200px;
  position: relative;
  border: 3px solid green; 
}

.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


 






            

            
posted @ 
2022-09-13 16:14 
新兵蛋Z 
阅读(302) 
评论(0) 
 
收藏 
举报