zoukankan      html  css  js  c++  java
  • CSS3学习笔记-字体和文字

    字体

    字体族font-family

    通常需要给处字体栈以适应不同机器间的适配,多单词字体需要用引号

    body{
      font-family:"trebuchet ms", tahoma, sans-serif;  
    }

    serif和sans-serif是最保险的方法

    字体大小

    设置font-size:62.5% 1em=10px

    em单位的相对大小会逐层复合

    rem 相对于根元素的字体大小,不支持ie8极其以下的浏览器

    字体样式

    font-style:italic normal oblique

    html中可以直接使用<em>标签做到italic斜体的效果,斜体在英文中表示强调

    字体粗细

    font-weight 主要bold 和normal html中可以使用<strong>标签

    字体变化

    font-variant: small-caps 和normal small-caps用来将字母转换为小型大写字母

    简写

    注意:必须声明font-size和font-family。且声明时其他属性不分先后,font-size倒二,font-family最后声明

    在设置字体大小时,可以顺便设置行高,如12px/1.5

    word-wrap

    normal | break-word 将内容在边界内换行

    word-break

    normal | break-all(中断单词) | keep-all(保留单词)

    white-space

    normal(无视空白符)| pre(保留空白符) | nowrap (文本不会换行,直到碰到<br/>标签)| pre-line (合并空白符)| pre-wrap (保留空白符,正常换行)

    文本属性

    文本缩进text-indent 

    注:子元素文本会继承父元素的文本缩进。文本元素只作用于文本内容,不作用于包裹文本元素的盒子

    在设定缩进和外边距时要使用em,以便用户改变字体大小时,它们能等比变化

    字符间距letter-spacing

    正值增大,负值缩小,缩小标题的字符间距能够让网页显得更专业

    单词间距word-spacing

    文本装饰text-decoration

    line-height行高,修改默认行高的快捷属性就是在font中应用:

    div#intro {font:1.2em/1.4 helvetica, arial, sans-serif;}

    文本转换text-transform

    normal uppercase lowercase capitalize(首字母大写)

    text-overflow

    clip | ellipsis文本溢出显示省略标记

    text-overflow要在一定的高度范围内配合overflow:hidden才能生效

    .text{
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }

    垂直对齐vertical-align

    sub super top middle bottom 

    以基线为参照上下移动文本,只影响行内元素。注:如果想影响块级元素,需使用Inline或Inline-block。

    常用于文字上标及下标,脚注等,html标签有上标<sup>和下标<sub>,重新设置font-size和vertical-align会达到更好的效果

    Web字体@font-face

    (1)@font-face 中的font-family仅用于元素中font-family的引用

    (2)应用多个字体就启用多个@font-face规则

    (3)src属性会依次获取字体的来源

    (4)可以使用字体图标

     在::before和::after的content的元素中引用html实体,需要将十六进制的改写为201C这样的形式

    html5 的<blockquote>用于表示被引用的文本,<quote>用于将文本的开头和末尾加上双引号

  • 相关阅读:
    可视化工具之 IGV 使用方法
    SAM格式 及 比对工具之 samtools 使用方法
    比对工具之 BWA 使用方法
    项目一:使用二代测序数据进行基因组组装(局部组装)
    Linux 打包和压缩 方法详解
    Oracle 11G R2 RAC中的scan ip 的用途和基本原理【转】
    ORACLE表空间查询和管理【转】
    MySQL分布式集群之MyCAT(三)rule的分析【转】
    MySQL分布式集群之MyCAT(二)【转】
    linux快速复制大量小文件方法 nc+tar【转】
  • 原文地址:https://www.cnblogs.com/goOtter/p/9655907.html
Copyright © 2011-2022 走看看