0
点赞
收藏
分享

微信扫一扫

CSS笔记——font、line-height知识点及图片间隙、文本溢出等解决方案

若如初梘 2023-09-27 阅读 46

一、CSS字体属性

  1. font-family(字体族):指定字体的名称或类别。可以指定多个字体族,用逗号分隔,浏览器会按照指定的顺序依次寻找可用字体。可取值:

    • 字体名称:如"Arial"、"Times New Roman"等。
    • 通用字体系列:如"serif"、“sans-serif”、"monospace"等。
    • 自定义字体系列:如"myFont, Arial, sans-serif"。
  2. font-size(字号):指定字体的大小。可取值:

    • 绝对单位:如"px"、“pt”、“mm”、“cm”、“in”。
    • 相对单位:如"em"、“rem”、“ex”、“ch”、“vw”、“vh”、“vmin”、“vmax”。
    • 百分比:如"100%"、"200%"等。
  3. font-weight(字重):指定字体的粗细。可取值:

    • 数字:如"100"、“400”、"700"等,表示相应的字重值。
    • 关键字:如"normal"、“bold”、“bolder”、"lighter"等。
  4. font-style(字体样式):指定字体的风格。可取值:

    • 关键字:如"normal"、“italic”、“oblique”。
    • 继承值。
  5. font-variant(字体变形):指定字体的大小写形式。可取值:

    • 关键字:如"normal"、“small-caps”。
    • 继承值。
  6. font-stretch(字体拉伸):指定字体的紧缩或扩张程度。可取值:

    • 关键字:如"normal"、“condensed”、“expanded”、“ultra-condensed”、“extra-condensed”、“semi-condensed”、“semi-expanded”、“extra-expanded”、“ultra-expanded”。
    • 数字:如"50%"、"200%"等。
  7. line-height(行高):指定文本行的高度。可取值:

    • 绝对单位:如"px"、“pt”、“mm”、“cm”、“in”。

    • 相对单位:如"em(相对父元素的大小)"、“rem(相对根元素的大小)”、“ex(小写字母高度)”、“ch”、“vw”、“vh”、“vmin”、“vmax”。

    • 数字:表示字体大小的倍数。

    • 百分比:表示字体大小的百分比。

    • 行高相关注意点:

**注意:**以上属性可以合并成一个font属性,如font: 16px/1.5 Arial, sans-serif;,其中斜杠前面的是字号,斜杠后面的是行高。

二、其他常见属性

  • color:xxx; 设置字体颜色

  • text-align : center; 设置文本水平方向居中,也可设left、right、justify(两端对齐)

  • Vertical-align 适用于行内、行内块元素

解决图片底部存在间隙

  • text-index:设置文本缩进

  • text-decoration:none/underline(下划线)/line-throngh(贯穿线)/overline(上划线) 文本装饰

  • text-transform: uppercase(转小写)/none/lowercase(转小写)/capitalize(首字母大写)

  • word-spacing: xx px; 英文单词间距

  • letter-spacing:字母之间间距

  • white-spacing :nowrap(不换行,中文会自动换行)/normal,设置中文是否换行

  • word-break: 强制换行 ,可取值keep-all(不换行)、break-all(换行,英文不会自动换行)

解决文本溢出问题方案:

举报

相关推荐

0 条评论