HTML字体及文本样式

最新推荐文章于 2024-05-15 07:43:18 发布

昔西西西

最新推荐文章于 2024-05-15 07:43:18 发布

阅读量6.4k

点赞数 8

分类专栏：前端文章标签： html css

本文链接：https://blog.csdn.net/xy25408/article/details/119741408

版权

前端专栏收录该内容

19 篇文章 1 订阅

订阅专栏

1.文本属性

1.1 颜色属性

color:值

英文单词：red、blue、pink…
rgb ：r（red 红色）g（green 绿色） b（blue 蓝色） rgb(0,0,0)

每个值的取值范围在0-255之间，0代表不发光，值越大越亮

红色: rgb(255,0,0);
绿色: rgb(0,255,0);
蓝色: rgb(0,0,255);
黑色: rgb(0,0,0);
白色: rgb(255,255,255);
rgba：和前面一样，只是多了透明度a，取值为0-1，值越小越透明
十六进制：#FFEE00 ，其中FF代表r，EE代表g，00代表b

1.2 字体属性

1.2.1 font-style

用于打开和关闭斜体文本
取值：
 	  normal ： 正常的， 默认就是正常的
 	  italic :  倾斜的
快捷键：
 	  fs font-style: italic;
 	  fsn font-style: normal;

1.2.2 font-weight

设置字体粗细程度
取值:
	  bold    加粗
	  bolder  比加粗还要粗
	  lighter 细线， 默认就是细线
	  100-900之间整百的数字
	  400 等同于 normal
	  700 等同于 bold
快捷键：
	  fw font-weight:;
	  fwb font-weight: bold;
	  fwbr  font-weight: bolder;

1.2.3 font-size

指定文字大小
格式：font-size: 30px;
快捷键：
	  fz font-size:;
	  fz40 font-size: 40px;

1.2.4 font-family

指定文字特殊的字体，浏览器只会使用浏览器可以访问到的字体
格式：font-family:"楷体";
通用字体 (直接使用，不需要加引号)
	  serif:有衬线的字体,笔画结尾有特殊的装饰线或衬线
	  sans-serif:无衬线的字体，笔画结尾是平滑的字体
	  monospace:等宽字体，用于代码，字体中每个字宽度相同
	  cursive:草书，这种字体有的有连笔，有的还有特殊的斜体效果。
	  fantasy:装饰字体 ，具有特殊艺术效果的字体
 快捷键
	  ff font-family:;

注意点

取值是中文，需要用双引号或者单引号括起来，多个单词组合也需要
设置的字体必须是用户电脑里面已经安装的字体
若设置的字体不存在，那么系统会使用默认的字体来显示默认使用宋体
可以设置多个字体样式，预防字体不存在，格式：font-family:“字体1”, “备选方案1”, …;
设置的中文字体里面都包含了英文，设置的英文字体不包含中文
如果想给界面中的英文单独设置字体，那么英文的字体必须写在中文的前面

1.2.5 font 缩写格式

font : style weight size family;

例如:
font : italic bold 10px “楷体”;

注意点

style、weight属性值可以省略、位置可以交换
size、family属性值不可以省略、位置不能乱放，size需要family前面，且必须写在所有属性的后面

1.2.6 网络字体（WebFont）

当用户电脑中没有安装对应字体的时候，webFont可以加载网络字体进行显示。

地址：https://www.ziti163.com/webfont/

1.2.7 字体图标

通过控制字体大小，字体颜色来控制图标的大小与颜色。

目前比较流行的开源字体图标库有
iconfont http://www.iconfont.cn/
font-awesome http://fontawesome.dashgame.com/

使用多色图标

例子：在iconfont中，选择合适的图标加入购物车，及那个图标添加至项目中，在项目中选择symbol，生成线上链接或下载到本地。引用线上js地址，直接使用script标签引入即可；下载到本地，引入iconfont.js到项目中即可

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 加入通用css代码（引入一次就行） */
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
  </style>
  <!-- 线上 -->
  <script src="http://at.alicdn.com/t/font_2723033_a8d3feqyo3r.js"></script>
  <!-- 本地 -->
  <script src="./font_2723033_472uiy994m2/iconfont.js"></script>
</head>
<body>
  <!-- 挑选相应图标并获取类名，应用于页面 -->
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xianxingbingbao"></use>
  </svg>
</body>
</html>

1.3 文本修饰属性

格式:text-decoration: underline;
取值:
underline 下划线
line-through 删除线
overline 上划线
none 什么都没有, 最常见的用途就是用于去掉超链接的下划线

1.4 文本水平对齐的属性

格式: text-align: right;
取值:
left 左
right 右
center 中

1.5 文本缩进的属性

格式: text-indent: 2em;
取值:
2em, 其中是em单位, 一个em代表缩进一个文字的宽度

1.6 设置或者取消字体改变

用于使文本显示为全大写或全小写，text-transform 允许字体改变，文本变形

格式: text-transform: uppercase

取值：

none 防止任何改变

uppercase 将文本转换为大写

lowercase 将文本转换为小写

capitalize 将所有单词第一个字母转换为大写

full-width 转换为类似于一个等宽字体

1.7 字体阴影

格式: text-shadow: h-shadow v-shadow blur color;
取值:
none:取消所有阴影
h-shadow :必需，水平阴影的位置，允许负值
v-shadow :必需，垂直阴影的位置，允许负值。
blur:可选，模糊的距离
color:可选，阴影的颜色

2.列表样式

无序列表 ul>li | 有序列表 ol>li | 定义列表 dl>dt>dd

2.1 默认的样式

1.ul、ol元素：margin-top: 16px(1em)，margin-bottom: 16px ， padding-left: 40px(2.5em)

2.li 元素没有设置默认的空白（行间距）

3.dl 元素：margin-top: 16px(1em)，margin-bottom: 16px

4.dd 元素：margin-left: 40px(2.5em)

2.2 list-style-type

设置列表项标志类型

取值:

none：无标记

disc：默认值，标记是实心圆

circle：标记是空心圆

square：标记是实心方块

decimal：标记是数字

decimal-leading-zero：0开头的数字标记(01, 02, 03, 等)

lower-roman：小写罗马数字(i, ii, iii, iv, v, 等)

upper-roman：大写罗马数字(I, II, III, IV, V, 等)

lower-alpha：小写英文字母The marker is lower-alpha (a, b, c, d, e, 等)

upper-alpha：大写英文字母The marker is upper-alpha (A, B, C, D, E, 等)

2.3 list-style-position

设置列表项标志出现的位置

取值:

outside : 列表项标志出现在主块框的外部

inside : 列表项标志出现在主块框的内部

2.4 list-style-image

自定义设置列表项标志

取值:

url() : 指定图标位置

2.5 list-style

列表样式的速记写法
取值:

[<type>][<image>][<position>]

我们最常用的就是list-style:none;将li标签中默认的小圆点样式清空，设置没有任何样式。

3.其他样式

3.1 line-height

设置文本的行高取值为绝对单位或者相对单位

3.2 display

显示方式的切换

inline：行内显示，宽高无效

block：块级显示，宽高有效

inline-block：行内块级元素，元素既能够不独占一行，又可以设置宽度和高度

none ：不显示，隐藏时不占据屏幕空间

flex ：伸缩盒布局

3.3 visibility

显示与隐藏

hidden：隐藏元素，隐藏时依旧占据屏幕空间

visible：显示元素

3.4 opacity

透明度，0-1之间的取值，取值为0的时候隐藏，隐藏时依旧占据屏幕空间

3.5 overflow 溢出处理

hidden：超出设置的宽度或高度，内容会隐藏

auto：超出范围会产生滚动条

scroll：一直显示滚动条

3.6 cursor

指定光标的样式

default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize	此光标指示矩形框的边缘可被向下移动（南）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
help	此光标指示可用的帮助（通常是一个问号或一个气球）。

昔西西西

关注

8
点赞
踩
64

收藏

觉得还不错? 一键收藏
0
评论
HTML字体及文本样式

1.文本属性1.1 颜色属性color:值英文单词：red、blue、pink…rgb ：r（red 红色）g（green 绿色） b（blue 蓝色） rgb(0,0,0)每个值的取值范围在0-255之间，0代表不发光，值越大越亮红色: rgb(255,0,0);绿色: rgb(0,255,0);蓝色: rgb(0,0,255);黑色: rgb(0,0,0);白色: rgb(255,255,255);rgba：和前面一样，只是多了透明度a，取值为0-1，值越小越透明
复制链接

扫一扫