• CSS---关于font文本属性设置样式总结

    目录

    1、color属性

    2、font-size属性

    3、font-weight属性

    4、font-family属性

    5、text-align属性

    6、line-height属性

    7、text-indent属性

    8、letter-spacing属性

    9、word-spacing属性

    10、word-break属性

    11、white-space属性

    12、text-transform

    12、writing-mode

    13、text-decoration

    1、color属性

    1. // 颜色名，如【red】
    2. // 十六进制值，如【#FFFFFF】
    3. // RGB值，如【rgb(255, 0, 0)】
    4. // rgba值，如【rgba(255, 0, 0, 0.9)】
    5.  
    6. color: red;
    7. color: #fff;
    8. color: rgb(255,0,0);

    2、font-size属性

    1. 1. 用于设置文本字体大小，可以设置为绝对大小，单位为px，也可设置为相对大小，单位为rem、em等
    2. 2. 字体大小未设置时，如果无父组件则默认16px; 如果父组件有字体大小则复用父组件字体大小;
    3.  
    4. font-size: 16px;
    5. font-size: 2em;
    6. font-size: 2.5rem;

    3、font-weight属性

    - 用于设置文本的粗细，可设置的值有：

    属性值说明
    normal标准字符（默认）
    bold粗体字符
    bolder更粗的字符
    lighter更细的字符
    100、200、300、400、500、
    600、700、800、900    		400相当于normal
    700相当于bold
    数值越大字体越粗

    4、font-family属性

    1. - 用于规定文本使用的字体名或字体族名列表，字体名在列表越往前优先级越高。
    2. 如果浏览器不支持第一个字体，则会尝试下一个，以此类推
    3.  
    4. font-family："Times New Roman", "Georgia", "Serif";

    5、text-align属性

    1. 用于设置文本的水平对齐方式，可设置的值有：默认值为left
    2.  
    3. center（居中对齐） left（左对齐） right（右对齐）

    6、line-height属性

    1. 用于设置行间距，可设置的值如下：
    2.  
    3. 数字：行间距为当前字体大小乘此数字
    4. 固定值：设置固定的行间距，如20px
    5. 百分比：行间距为当前字体大小乘百分比
    6.  
    7. 按默认字体16px:
    8. line-height:1; // 16px
    9. line-height:20px; // 20px
    10. line-height:50%; // (16*0.5) 9px

    7、text-indent属性

    1. - 用于指定首行缩进值，可设置的值如下
    2.  
    3. 固定值：设置固定首行缩进，如20px
    4. 百分比：首行缩进值为父元素宽度乘此百分比
    5. text-indent:2em|20px;
    6. text-indent:20%; // 0.2*100= 20px 100px为父盒子宽度

    8、letter-spacing属性

    用于设置字间距，设置固定值为字间距，如10px

    normal默认字距，忽略任何其他字距属性
    指定字符间距，可以用px、em、cm等单位
    inherit继承父元素的字符间距

    9、word-spacing属性

    用于指定文本中单词之间的间距，设置固定值为单词间距，如10px

    normal;默认值。表示单词间距与字母间距相同。
    word-spacing: length;用长度值表示单词间距。
    word-spacing: initial;重置该属性为它的默认值。
    word-spacing: inherit;从父元素继承该属性。

    10、word-break属性

    对英文单词处理

    属性名描述
    normal使用默认的换行规则。
    break-all允许在单词内换行。
    keep-all保持所有单词在同一行内，不允许换行。
    break-word允许在单词内换行，但如果单词太长，仍会被强制换行。
    initial设置属性为它的默认初始值。
    inherit从父元素继承属性。
    unset重置为自然状态。

    注意：break-all 和 break-word 会破坏单词的完整性，可能会影响阅读体验，要谨慎使用。

    11、white-space属性

    用于设置文本的空白符处理方式，属性值如下

    属性值描述
    normal合并空格，换行符转化为一个空格，允许自动换行
    nowrap合并空格，换行符转化为一个空格，不允许自动换行
    pre保留空格，保留换行符，不允许自动换行
    pre-line合并空格，保留换行符，允许自动换行
    pre-wrap保留空格，保留换行符，允许自动换行
    break-spaces保留空格，保留换行符，允许自动换行，行尾空格保留，空白符占用空间

    12、text-transform

    用于设置文本大小写字母，常用属性如下​​

    属性值描述
    uppercase全部文本均为大写字母。
    lowercase全部文本均为小写字母。
    capitalize首字母大写，其余字母小写，仅作用于单词首字母。
    none没有转换，保留原有大小写。

    12、writing-mode

    设置文本在水平或垂直方向的排布方式

    属性值描述
    horizontal-tb文本流在水平方向从上到下排列，文字方向为水平方向。
    sideways-lr文本流在垂直方向，从下至上、从左至右排列。该属性值不兼容webkit内核浏览器。
    sideways-rl文本流在垂直方向，从上至下、从右至左排列。该属性值不兼容webkit内核浏览器。
    vertical-lr文本流在垂直方向，从上至下、从左至右排列，文字方向为水平方向。
    vertical-rl文本流在垂直方向，从上至下、从右至左排列，文字方向为水平方向。跟古诗阅读顺序一致。

     

     13、text-decoration

    用于设置文本的装饰线，是下表属性的简写

    属性属性值描述
    text-decoration-linenone无线条设置要使用哪种文本装饰的类型
    （下划线、上划线、删除线）。
    underline下划线
    overline上划线
    line-through删除线
    text-decoration-color颜色名、十六进制颜色、rgb等设置装饰线颜色
    text-decoration-stylesolid实线设置装饰线的样式
    double双实线
    dotted点划线
    dashed虚线
    wavy波浪线
  • 相关阅读:
    含文档+PPT+源码等]精品基于PHP实现的美食菜谱网站[包运行成功]计算机PHP毕业设计项目源码
    工程管理系统简介 工程管理系统源码 java工程管理系统 工程管理系统功能设计
    关于dialog 切换主题的难题
    国际结算期末模拟试题A及参考答案
    换个角度入门 K8s
    mac命令行安装java
    取Dataset子集(pytorch)
    AI绘画：SD绘画实操过程-云龙-高瑶制作教程（附资料及变现）
    “分布式锁”，一直以来你的选择依据正确吗？
    LeetCode 356. Line Reflection【数学,哈希表】中等
  • 原文地址：https://blog.csdn.net/COCOLI_BK/article/details/134439303