字体的样式设置和字体分类

最新推荐文章于 2023-12-16 16:35:35 发布

代码cv的搬运工

最新推荐文章于 2023-12-16 16:35:35 发布

阅读量1.4k

点赞数

分类专栏：字体样式文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/qq_46534049/article/details/127306958

版权

字体样式专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.字体各种样式

（1）color：可以设置字体颜色，还有外边框颜色；

（2）font-size:设置字体大小，注意不同的单位：px,em,rem.

(3)font-family:设置字体。

（4）@font-face：自定义字体：样式是font-family："字体";src:url（字体的路径）。

（5） text-transform：可以设置字体大小。有四个选值：none:文本正常显示,

lowercase：文本以小写字母显示,

uppercase文本以大写字母显示，

capitalize以首字母大写显示。代码代码1如图显示

（6）text-decoration：设置文本修饰。四个可选值如下：

none 默认值，文本正常显示

overline 上划线

underline 下划线

line-through 删除线。

（7）letter-spacing可以指定字符间距

（8） word-spacing单词之间的距离

（9）text-align用于设置文本的对齐方式

可选值：

left 文本靠左显示

right 文本靠右显示

center 文本居中显示

justify 两端对齐 .

（10）text-indent 设置首行缩进，px，em,rem.

(11)设置单行文本的省略号固定写法 :

第一设置一个固定的宽度：width:

第二设置换不换行： white-space:nowrap;

第三设置：裁剪多余 overflow: hidden;

第四设置设置溢出内容以省略号的形式出现： text-overflow: ellipsis;

（12）text-shadow:; 设置文本的阴影

4个参数：

(1)、阴影的水平位移距离正值向右偏移，负值向左偏移必选

（2）、阴影的垂直位移距离正值向下偏移，负值向上偏移必选

（3）、阴影的模糊半径可选默认0px

（4）、阴影的颜色一般用rgba颜色可选，默认是字体的颜色

写法如：text-shadow:3px 5px 1px ;

(13)box-shadow:跟上面的一样除了默认颜色盒子只有黑色。

（14）:vertical-align 作用：1、设置图文对齐方式

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

可选值：

baseline 基线对齐以英文x最底下为对齐标准

bottom 底部对齐

top 顶部对齐

middle 居中对齐

（15）display属性实现元素之间的相互转化

可选值：

none 隐藏元素

block 将元素专成块元素

inline 将元素转成行内元素

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

.p1{
    color: rgb(25, 27, 27);
    text-transform: capitalize;
}
.p2{
    width: 500px;
    height: 500px;
    color: blue;
    text-decoration: 70px;
    text-transform:uppercase;
    text-decoration: line-through;
    letter-spacing: 10px;
    word-spacing: 10px;
    box-shadow: 0px 0px 10px red;
   

}
.p3{
    color: cadetblue;
    background-color: aliceblue;
    text-align: center;
    text-shadow: 10px 3px 3px ;
   
}
.p4{
    width: 500px;
    white-space: nowrap;
    color: palevioletred;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size: 50px;
    

}


    </style>
</head>
<body>
    <p class="p1">
        小仓要范极四揽身妙之掸资论密弟活中，真婵答，丑韩陀，你害仇。Lo rem ipsum dolor sit amet consectetur adipisicing elit. Rem, eos.
      </p>
      <p class="p2">
        小仓要范极四揽身妙之掸资论密弟活中，真婵答，丑韩陀，你害仇。Lo rem ipsum dolor sit amet consectetur adipisicing elit. Rem, eos.
      </p>
      <p class="p3" >书然人洋主，不得失是法妄无作国种处谓，同极光年觉老韩生死春人这三九，使的分花时尚风藏后畴死巴不变她国领之，家可将，为是洪份而被冷的韩他关家逃历玉是降身，案整才人幕台罚惶虑决人骨哥第，汪应成朋思支九惜所不解竟，楚病要设者楚，以九九这让令兴帮尝说韩么，才不一。</p>
      <p class="p4" >书然人洋主，不得失是法妄无作国种处谓

注意：元素之间的相互转换，可以用，但还是标签的本来分类为主

代码cv的搬运工

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
字体的样式设置和字体分类

第四设置设置溢出内容以省略号的形式出现： text-overflow: ellipsis;（4）@font-face：自定义字体：样式是font-family："字体";（2）font-size:设置字体大小，注意不同的单位：px,em,rem.（4）、阴影的颜色一般用rgba颜色可选，默认是字体的颜色。（6）text-decoration：设置文本修饰。（14）:vertical-align 作用：1、设置图文对齐方式。（10）text-indent 设置首行缩进，px，em,rem.
复制链接

扫一扫