css字体样式

最新推荐文章于 2024-04-06 20:41:17 发布

徽州不知名博客

最新推荐文章于 2024-04-06 20:41:17 发布

阅读量1.4k

点赞数 5

本文链接：https://blog.csdn.net/m0_57243953/article/details/125434454

版权

HTML 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

css

7 篇文章 1 订阅

订阅专栏

1、字体的样式

2、行间距

3、文本样式

除了在前面的文章中介绍的背景外，字体设置也是网页设计中的重要组成部分，合适的字体不仅会使页面更加美观，也可以提升用户体验。CSS 中提供了一系列用于设置文本字体样式的属性，比如更改字体，控制字体大小和粗细等等。

例如

font-family：设置字体；
font-style：设置字体的风格，例如倾斜、斜体等；
font-weight：设置字体粗细；
font-size：设置字体尺寸；
font-variant：将小写字母转换为小型大写字母；
font-stretch：对字体进行伸缩变形（使用较少，并且主流浏览器都不支持）；
font：字体属性的缩写，可以在一个声明中设置多个字体属性。

接下来逐一介绍

1、字体的样式

这里着重介绍几个样式

color 设置字体颜色,也可以设置其他颜色
font-size font-size 设置字体的大小单位 px,em rem
font-family 可以指定文字的字体
@font-face 自定义字体

举例说明：
<style>
      p {
        color: red;
        font-size: 30px;
        font-family:"xiyangyang";
      }
      @font-face {
        /* 字体起的名字 */
        font-family: "xiyangyang";
        /* 引入字体的路径 */
        src: url(./字体/MeowScript-Regular.ttf);
      }
    </style>
  </head>
  <body>
    <p>今天天气好晴朗</p>
  </body>
其他样式：

设置一个文字大小
font-size: 40px;
设置一个字体
font-family: fantasy;
设置文字斜体
font-style: oblique;
normal ----默认值

italic----文字斜体

oblique----文字斜体

设置文字的加粗
font-weight: 900;
可选值

normal 默认值文字正常显示

bold 加粗

100-900数值 100最细 900最粗

设置一个小型大写字母
font-variant: small-caps;

2、行间距

1、行高（line height）文字占有的实际高度
.box {
        width: 200px;
        height: 200px;
        background-color: pink;
        line-height: 200px;
      }
可选值

1、可以直接设置大小例如50px,100px

2、可以写数值，是字体的倍数

3、可以写百分比

2、单行文本在父元素中垂直居中，把行高和高度设置一样的，

行高=上间距+文字的大小+下间距

3、font中也可以指定行高

font: 38px/2 monospace;
p {
        font: 38px/2 monospace;
      }

3、文本样式

1: text-transform 可以用来设置文本的大小写

可选值：

none 默认值正常显示

uppercase 字母大写

lowercase 字母小写

capitalize 首字母大写

2: text-decoration [dɛkə'reɪʃ(ə)n] 可以用来设置文本的修饰

可选值：

none 没有任何修饰线

underline; 加下划线

overline 加上划线

line-through 删除线

3: letter-spacing可以指定字符间距

4: word-spacing可以设置单词之间的距离
.p1 {
        text-transform: capitalize;
        text-decoration: line-through;
        letter-spacing: 20px;
        word-spacing: 20px;
      }
5: text-align用于设置文本的对齐方式

可选值：

left 默认值左对齐

right 右对齐

center 居中对齐

justify 两端对齐

6: text-indent 设置首行缩进

一般用em为单位

7: white-space: ; 设置网页如何处理空白

可选值：

normal 默认值文本正常显示

nowrap 不换行

8: text-overflow 文本溢出包含元素时发生的事情

可选值：

none 默认值文本正常显示

ellipsis 省略号
.p2 {
        text-align:justify;
        text-indent:2em;
        background-color: pink;
        /* 文本省略号的固定的写法 */
        /* 设置固定的宽度 */
        width: 500px;
        /* 设置不换行 */
        white-space: nowrap;
        /* 裁剪多余 */
        overflow: hidden;
        /* 设置多余的内容用省略号代替 */
        text-overflow: ellipsis;
      }
9: text-shadow: h-shadow v-shadow blur color;

参数

1、阴影的水平位移距离必填

2、阴影的垂直位移距离必填

3、阴影的模糊半径选填默认是0px

4、阴影的颜色选填默认跟字体颜色一样
h1 {
        color: red;
        text-shadow: 15px 15px ;
      }
10: display: ; 实现元素间相互转换

可选值：

none 隐藏元素

block 讲元素转成块元素

inline-block 讲元素转成行内块元素

11:vertical-align:; 设置文本垂直对齐方式

1、设置图文对齐

可选值：

baseline 默认值基线对齐

bottom 下对齐

top 上对齐

middle 居中对齐

只能设置图文，表格的垂直对齐

2、解决图片三像素的问题

解决方案一：vertical-align:; 属性值不是baseline

解决方案二：给其父元素设置字体大小为0

解决方案三：将图片转成块元素

徽州不知名博客

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
css字体样式

字体设置是网页设计中的重要组成部分，合适的字体不仅会使页面更加美观，也可以提升用户体验。CSS 中提供了一系列用于设置文本字体样式的属性，比如更改字体，控制字体大小和粗细等等。
复制链接

扫一扫

专栏目录

color	设置字体颜色,也可以设置其他颜色
font-size	font-size 设置字体的大小单位 px,em rem
font-family	可以指定文字的字体
@font-face	自定义字体

css字体样式

1、字体的样式

2、行间距

3、文本样式

“相关推荐”对你有帮助么？