微信小程序开发——字体样式设置

2023-05-16

font-style文字样式

  • normal 正常字体
  • italic 斜体字
  • oblique 倾斜字体

font-weight文字粗细

  • 取值范围 100-900
  • normal 相当于400
  • bold 粗体 相当于700
  • bolder
  • lighter

font-size文字尺寸大小
font-variant文字是否为小型的大写字母

  • normal 正常的字体
  • small-caps 小型的大写字母

font-family字体名称
font-stretch文本是否横向拉伸变形

  • normal 正常文字宽度
  • ultra-condensed 比正常文字宽度窄4个基数
  • extra-condensed 比正常文字宽度窄3个基数
  • condensed 比正常文字宽度窄2个基数
  • semi-condensed 比正常文字宽度窄1个基数
  • semi-expanded 比正常文字宽1个基数
  • expanded 比正常文字宽度宽2个基数
  • extra-expanded 比正常文字宽3个基数
  • ultra-expanded 比正常文字宽度宽4个基数

color字体颜色

  • 16进制值,#92a8d1
  • RGB,rgb(255,1,23)
  • RGBA,rgba(244,12,12,0.7)
  • hsl,hsl(120,100%,25%)
  • hsla,hsla(120,100%,25%,0.7)

text-align文本的对齐方式

  • left 把文本排列到左边。默认值:由浏览器决定。
  • right 把文本排列到右边。
  • center 把文本排列到中间。
  • justify 实现两端对齐文本效果。
  • inherit 规定应该从父元素继承 text-align 属性的值。

vertical-align垂直对齐

  • baseline 默认。元素放置在父元素的基线上。
  • sub 垂直对齐文本的下标。
  • super 垂直对齐文本的上标
  • top 把元素的顶端与行中最高元素的顶端对齐
  • text-top 把元素的顶端与父元素字体的顶端对齐
  • middle 把此元素放置在父元素的中部。
  • bottom 使元素及其后代元素的底部与整行的底部对齐。
  • text-bottom 把元素的底端与父元素字体的底端对齐。
  • length 将元素升高或降低指定的高度,可以是负数。
  • % 使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。
  • inherit 规定应该从父元素继承 vertical-align 属性的值。

text-indent首行缩进

  • length 定义固定的缩进。默认值:0。
  • % 定义基于父元素宽度的百分比的缩进。
  • inherit 规定应该从父元素继承 text-indent 属性的值。

letter-sapcing字母之间的距离

  • normal 默认。规定字符间没有额外的空间。
  • length 定义字符间的固定空间(允许使用负值)。
  • inherit 规定应该从父元素继承 letter-spacing 属性的值。

word-spacing单词间距,以空格来区分单词

  • normal 默认
  • inherit 继承父元素
  • length 固定值

white-space文档中的空白处

  • normal 默认。空白会被浏览器忽略。
  • pre 空白会被浏览器保留。其行为方式类似 HTML 中的
    
     标签。  
  • nowrap 文本不会换行,文本会在在同一行上继续,直到遇到
    标签为止。
  • pre-wrap 保留空白符序列,但是正常地进行换行。
  • pre-line 合并空白符序列,但是保留换行符。
  • inherit 规定应该从父元素继承 white-space 属性的值。

text-overflow文本溢出包含它的元素时显示方式(需要配合white-space: nowrap、overflow: hidden使用)

  • clip 剪切文本。
  • ellipsis 显示省略符号 … 来代表被修剪的文本。
  • string 使用给定的字符串来代表被修剪的文本。
  • initial 设置为属性默认值。阅读关于 initial
  • inherit 从父元素继承该属性值。 阅读关于 inherit

overflow内容溢出一个元素的框

  • visible 默认值。内容不会被修剪,会呈现在元素框之外。
  • hidden 内容会被修剪,并且其余内容是不可见的。
  • scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
  • auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
  • inherit 规定应该从父元素继承 overflow 属性的值。

text-decoration文本修饰样式(以下三种属性的简写:text-decoration-line、text-decoration-color、text-decoration-style)

  • none 默认。定义标准的文本。
  • underline 定义文本下的一条线。
  • overline 定义文本上的一条线。
  • line-through 定义穿过文本下的一条线。
  • blink 定义闪烁的文本。
  • inherit 规定应该从父元素继承 text-decoration 属性的值。

text-shadow文本阴影

  • h-shadow 必需。水平阴影的位置。允许负值。
  • v-shadow 必需。垂直阴影的位置。允许负值。
  • blur 可选。模糊的距离。
  • color 可选。阴影的颜色。参阅 CSS 颜色值。

line-height行高

  • normal 默认。设置合理的行间距。
  • number 设置数字,此数字会与当前的字体尺寸相乘来设置行间距。
  • length 设置固定的行间距。
  • % 基于当前字体尺寸的百分比行间距。
  • inherit 规定应该从父元素继承 line-height 属性的值。

direction文本方向

  • ltr 默认。文本方向从左到右。
  • rtl 文本方向从右到左。
  • inherit 规定应该从父元素继承 direction 属性的值。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

微信小程序开发——字体样式设置 的相关文章

随机推荐

  • 32.QButtonGroup

    目录 1 创建和添加按钮 1 1 创建按钮组 1 2 添加按钮 addButton 2 查看按钮 2 3 获取当前选中的按钮 CheckedButton 3 从按钮组中移除按钮 removeButton 4 ID操作 4 1 设置 setI
  • Windows下的Win32串口编程

    在工业控制中 xff0c 工控机 xff08 一般都基于Windows平台 xff09 经常需要与智能仪表通过串口进行通信 串口通信方便易行 xff0c 应用广泛 一般情况下 xff0c 工控机和各智能仪表通过RS485总线进行通信 RS4
  • Ubuntu内网穿透

    本文借鉴 使用frp进行内网穿透 少数派 目录 1 准备材料 2 服务端部署 3 服务端后台运行 4 客户端部署 1 准备材料 1 一台具有公网IP的实体机 xff08 服务端 xff0c 也可以是vps 2 一台网页部署内网的实体机 客户
  • Ubuntu系统基本操作

    文章中所需要的文件可以在这里下载 链接 xff1a https pan baidu com s 1NYXxHD0jebngmCTEwgjGbQ 提取码 xff1a 2jyo 目录 1 安装谷歌浏览器 2 修改开机启动项 3 快捷键查找与设置
  • Ubuntu向日葵锁定之后忘记密码后解除锁定状态

    此操作会重置本机识别码与本机验证码 我们在使用向日葵的时候会使用锁定按钮 设置完密码之后 xff0c 我们忘了 xff0c 就会导致无法使用向日葵 重新安装也不能解决问题 xff0c 这个时候我们找到etc orayconfig conf
  • 26.疲劳检测

    目录 1 项目介绍 2 代码实现 2 1 导入库 2 2 定义68个关键点 2 3 定义eye aspect ratio 2 4 定义参数 2 5 定义阈值 2 6 定义次数 2 7 创建检测器 2 8 获取左眼与右眼的起始点与终止点 2
  • NX点亮oled

    效果是这样的 目录 1 接线 2 配置环境 3 运行代码 4 显示开发板信息 1 接线 小屏幕的名称叫oled xff0c 使用芯片SSD1306驱动 上面有四个引脚 xff0c 与NX接线如下 VCC 5V GND GND SDA 3 S
  • 43.一维卷积-航空公司评论情感预测

    之前我们使用的都是二维卷积 xff0c 二维卷积处理图像问题 xff0c 这次我们使用一维卷积 xff0c 一维卷积处理序列问题 一维卷积就是在一个序列上进行滑动 xff0c 从而得出一维卷积的结果 xff0c 详细一维卷积的介绍可以看一下
  • serial库常见用法

    安装的时候要输入 pip install pyserial 进行安装 serial是python做串口通讯的库 xff0c 在这里介绍了NX与Windows串口通讯 NX串口通讯windows Suyuoa的博客 CSDN博客 目录 1 使
  • Ubuntu开机自启动一些东西

    有三种方式做开机自启动 目录 1 免除sudo密码 2 Startup 2 desktop 3 service 1 免除sudo密码 做完这一步你的所有sudo命令都不会再让你输密码了 如果你的开机自启动的东西需要sudo xff0c 那么
  • 附录3-动态组件 component与keep-alive setup()写法

    目录 1 基本使用 2 按钮切换组件 3 keep alive 3 1 在切换组件的时候 xff0c 默认情况下被切换的组件就会被销毁 3 1 1 数据情况 3 1 2 生命周期函数情况 3 2 使用 keep alive 3 3 keep
  • 附录11-插件ESLint与prettier

    ESLint是提示错误的 xff0c prettier是帮你解决错误的 目录 1 ESLint 1 1 安装 1 2 配置 1 3 效果 2 prettier 1 ESLint 1 1 安装 1 2 配置 在插件介绍中 xff0c 搜索 e
  • 用 C 语言编写 Windows 服务程序

    NTService cpp Defines the entry point for the console application include lt windows h gt include lt stdio h gt define S
  • 10.过滤器

    过滤器是做文本格式化的 xff0c 只能用在 插值表达式 与 v bind 上 xff0c 在vue3中已经被弃用了 xff0c 这里我简单记录一下并写一下在vue3的替代方法 目录 1 基本使用 1 1 vue2中的写法 1 2 vue3
  • 24.eslint

    eslint是约束代码写法的插件 xff0c 比如组件的命名必须要用驼峰命名这种 eslint官网 检测并修复 JavaScript 代码中的问题 ESLint 插件化的 JavaScript 代码检查工具 目录 1 vue cli的esl
  • CocoaPods的使用——pod install pod install --repo-update pod update pod update --repo-update

    Podfile文件中 xff0c 使用某个库时 不指定版本 xff0c 表示希望使用最新版本 xff0c 如 pod SDWebImage 指定明确版本 xff0c 表示只想要这个版本 xff0c 如 xff1a pod 39 SDWebI
  • SceneDelegate有什么作用?删除有什么影响

    自从Xcode11发布以来 xff0c 当你使用新XCode创建一个新的iOS项目时 xff0c SceneDelegate会被默认创建 xff0c 它到底有什么用呢 xff1f 在iOS 13 xff08 及以后版本 xff09 上 xf
  • UICollectionViewCell自适应宽度

    如图所示效果 xff0c 根据字符长度自适应UICollectionViewCell的大小 xff0c 同时进行左对齐处理 如何实现 继承UICollectionViewFlowLayout创建子类 xff0c 并实现相关的方法 xff0c
  • 微信小程序开发——JS中字符和数组的操作

    字符的操作 span class token keyword var span word span class token operator 61 span span class token string 34 hello world 34
  • 微信小程序开发——字体样式设置

    font style文字样式 normal 正常字体italic 斜体字oblique 倾斜字体 font weight文字粗细 取值范围 100 900normal 相当于400bold 粗体 相当于700bolderlighter fo