当前位置：首页 > news >正文

CSS3 动画相关属性实例大全（四)（font、height、left、letter-spacing、line-height 属性）

news 2025/11/7 5:34:44

CSS3 动画相关属性实例大全（四)

（font、height、left、letter-spacing、line-height 属性）

本文目录：

一、font 属性（所有字体属性）

1.1、font-size属性（指定字体的大小）

1.2、font-size-adjust 属性（调整字体大小）

1.3、font-stretch属性（定义字体外观）

1.4、font-weight属性（指定字体的粗细程度）

二、height属性（元素的高度）

三、left属性（元素的左外边距边界与其包含块左边界之间的偏移）

四、letter-spacing属性（字符间距的大小）

五、line-height 属性（设置多行元素的空间量）

一、font 属性（所有字体属性）

font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写，或将元素的字体设置为系统字体

<style> 
#animation40 {border: 1px solid black;width: 150px;height: 150px;-webkit-animation: animation40a 2s infinite; animation: animation40a 2s infinite;
}@-webkit-keyframes animation40a{ 50% {font: 25px bold; }}
@keyframes animation40a{ 50% {font: 25px bold; }}
</style>

<div id="animation40"><p>font 属性是所有字体属性的简写</p>
</div>

改变 font 属性：font: 25px bold

值	Font 特性描述
font-style	规定字体样式。
font-variant	规定字体异体
font-weight	规定字体粗细。
font-size/line-height	规定字体尺寸和行高。
font-family	规定字体系列。
caption	定义被标题控件（比如按钮、下拉列表等）使用的字体。
icon	定义被图标标记使用的字体。
menu	定义被下拉列表使用的字体。
message-box	定义被对话框使用的字体。
small-caption	caption 字体的小型版本。
status-bar	定义被窗口状态栏使用的字体。

1.1、font-size属性（指定字体的大小）

font-size CSS 属性指定字体的大小。
因为该属性的值会被用于计算 em 和 ex 长度单位，定义该值可能改变其他元素的大小

font-size属性（指定字体的大小）
<absolute-size>绝对大小值	font-size: xx-small; font-size: x-small; font-size: small; font-size: medium; font-size: large; font-size: x-large; font-size: xx-large;
<relative-size>相对大小值	font-size: larger; font-size: smaller;
<length>长度值	font-size: 12px; font-size: 0.8em;
<percentage>百分比值	font-size: 80%; font-size:250%，font-size:200% font-size: inherit;
JavaScript 语法：	object.style.fontSize="larger"

<style> 
#animation41 {border: 1px solid black;width: 200px;height: 100px;font-size: xx-small;color: purple;-webkit-animation: animation41a 2s infinite; animation: animation41a 2s infinite;}
@-webkit-keyframes animation41a{ 50% {font-size: 40px;}}
@keyframes animation41a{ 50% {font-size: 40px; }}
</style>

<div id="animation41"><p>逆境清醒</p>
</div>

改变 font-size 属性：从 font-size: xx-small; 到 font-size: 40px;

1.2、font-size-adjust 属性（调整字体大小）

font-size-adjust属性，通过指定font-size-adjust属性，浏览器将调整字体大小，无论字体系列
让您更好的控制字体大小，当第一个选择的字体不可用时，浏览器使用第二个指定的字体。

这可能会导致改变字体大小。为了防止这种情况，使用的font-size-adjust属性。

所有字体都能有"aspect值"，这是小写字母"X"和大写字母"X"的大小差异。

当浏览器知道"aspect值"为第一选择的字体时，浏览器可以找出什么样的font-size使用第二选择字体显示文字。

目前支持的浏览器数量不足，暂不举例

font-size-adjust CSS 属性定义字体大小应取决于小写字母，而不是大写字母。在字体较小时，字体的可读性主要由小写字母的大小决定，通过此选项即可进行调整。

1.3、font-stretch属性（定义字体外观）

Chrome浏览器
font-stretch 属性	为字体定义一个正常或经过伸缩变形的字体外观，这个属性并不会通过伸展/缩小而改变字体的几何外形，如font-feature-settings和font-variant属性，它仅仅意味着当有多种字体可供选择时，会为字体选择最适合的大小。
normal	指定默认字体
semi-condensed, condensed, extra-condensed, ultra-condensed	小于默认字体，其中 ultra-condensed 是缩的最小的字体
semi-expanded, expanded, extra-expanded, ultra-expanded	大于默认字体的值

<style>@font-face {src: url('fonts/LeagueMonoVariable.ttf');font-family:'LeagueMonoVariable';font-style: normal;font-stretch: 1% 500%; /* Required by Chrome */
}.container {  font: 1.5rem 'LeagueMonoVariable', sans-serif;}.condensed {  font-stretch: 50%;}.normal {  font-stretch: 100%;}.expanded {  font-stretch: 200%;}<style>

<div class="container"><p class="condensed">LeagueMonoVariable</p><p class="normal">LeagueMonoVariable</p><p class="expanded">LeagueMonoVariable</p>
</div>

1.4、font-weight属性（指定字体的粗细程度）

font-weight CSS 属性指定了字体的粗细程度。

一些字体只提供 normal 和 bold 两种值。

normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。
100~900	定义由细到粗的字符。400 等同于 normal，而 700 等同于 bold。
inherit	规定应该从父元素继承字体的粗细。
JavaScript 语法：	object.style.fontWeight="900"

<style>#animation44 {border: 1px solid black;width: 200px;height: 200px;font-weight: lighter;color: purple;font-size: 40px;-webkit-animation: animation44a 2s infinite;animation: animation44a 2s infinite;}
@-webkit-keyframes animation44a{ 50% {font-weight: bolder;}}
@keyframes animation44a{ 50% {font-weight: bolder; }}
</style>

<div id="animation44" style="text-align:center;"><p>逆境清醒</p>
</div>

改变 font-weight属性：从 font-weight: lighter;到 font-weight: bolder;

二、height属性（元素的高度）

height CSS 属性指定了一个元素的高度。

默认情况下，这个属性决定的是内容区（ content area）的高度，

但是，如果将 box-sizing 设置为 border-box ,

这个属性决定的将是边框区域（border area）的高度。

    <style>#animation45 {width: 150px;height: 50px;background: #CCCCFF;border: 1px solid #000000;-webkit-animation: animation45a 2s infinite;animation: animation45a 2s infinite;}@-webkit-keyframes animation45a{  50% {height: 200px;}        }@keyframes animation45a{    50% {height: 200px;}        }</style>

    <div id="animation45" style="text-align:center;"><p>逆境清醒</p></div>

改变 height属性：从height: 50px;到 height: 200px;

三、left属性（元素的左外边距边界与其包含块左边界之间的偏移）

left属性定义了

定位元素的左外边距边界与其包含块左边界之间的偏移，

非定位元素设置此属性无效。

left的效果取决于元素的position属性：

当position设置为absolute或fixed时，left属性指定了定位元素左外边距边界与其包含块左边界之间的偏移。
当position设置为relative时，left属性指定了元素的左边界离开其正常位置的偏移。
当position设置为sticky时，如果元素在 viewport 里面，left属性的效果和 position 为relative等同；如果元素在 viewport 外面，left属性的效果和 position 为fixed等同。
当position设置为static时，left属性无效。
当left和right 同时指定时，元素的位置会被重复指定。当容器是从左到右时，left的值会被优先设定；当容器是从右到左时，right的值会被优先设定。

    <style>#animation46 {top:80px;width: 100px;height:50px;margin: auto;border: 2px solid #111111;background-color:lightblue;color:black;-webkit-animation: animation46a 1s infinite; animation: animation46a 1s infinite;}@-webkit-keyframes animation46a{ 50% {left: 620px;} }@keyframes animation46a{ 50% {left: 620px;} }</style>

<div id="animation46">逆境清醒</div>

left属性定义了

定位元素的左外边距边界与其包含块左边界之间的偏移，

非定位元素设置此属性无效。

四、letter-spacing属性（字符间距的大小）

letter-spacing 属性

增加或减少字符间的空白，

表现效果为字符间距的大小

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

    <style>#animation47 {width: 200px;height: 300px;border: 1px solid black;background-color: lightblue;color: black;letter-spacing: normal;-webkit-animation: animation47a 1s infinite;animation: animation47a 1s infinite;}@-webkit-keyframes animation47a {50% {letter-spacing: 20px; }}@keyframes animation47a {50% { letter-spacing: 20px; }}</style>

 <div id="animation47"><p>当 你 孤 单 无 助 地 面 对 强 敌 时，谁 会 是 那 个 信 得 过 的 战 友？逆 境 清 醒 送 你 一 只 守 护 兔。</p></div>

etter-spacing 属性：

增加或减少字符间的空白，表现效果为字符间距的大小

改变 letter-spacing 属性：从 letter-spacing: normal;到 letter-spacing: 20px;

五、line-height 属性（设置多行元素的空间量）

line-height CSS 属性用于设置多行元素的空间量，如多行文本的间距。
对于块级元素，它指定元素行盒（line boxes）的最小高度。
对于非替代的 inline 元素，它用于计算行盒（line box）的高度。

    <style>#animation48 {width: 200px;height: 250px;border: 1px solid black;background-color: lightblue;color: black;line-height: normal;-webkit-animation: animation48a 1s infinite;animation: animation48a 1s infinite;}@-webkit-keyframes animation48a {50% {line-height: 50px;  } }@keyframes animation48a {50% {line-height: 50px; } }</style>

<div id="animation48"><p>当 你 孤 单 无 助 地 面 对 强 敌 时，谁 会 是 那 个 信 得 过 的 战 友？逆 境 清 醒 送 你 一 只 守 护 兔。</p></div>

改变 line-height 属性：从 line-height: normal;到 line-height: 50px;

未完待续》》》

1、CSS3 动画相关属性实例大全（一)（@keyframes ，background属性，border 属性）
2、CSS3 动画相关属性实例大全（二)（bottom 、box-shadow、clip、color 、column-count、column-gap、column-rule、column-rule-color、column-rule-width、column-width 属性）
3、CSS3 动画相关属性实例大全（三)（columns、filter、flex、flex-basis 、flex-grow、flex-shrink属性）
4、CSS3 动画相关属性实例大全（四)（font、height、left、letter-spacing、line-height 属性）

推荐阅读：CSS @规则(At-rules)详解系列索引目录



给照片换底色（python+opencv）	猫十二分类	基于大模型的虚拟数字人__虚拟主播实例

计算机视觉__基本图像操作（显示、读取、保存）	直方图（颜色直方图、灰度直方图）	直方图均衡化（调节图像亮度、对比度）

语音识别实战（python代码）(一）	人工智能基础篇	计算机视觉基础__图像特征



matplotlib 自带绘图样式效果展示速查（28种，全）




Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（一）



立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦	Python 3D可视化（一）	让你的作品更出色——词云Word Cloud的制作方法（基于python，WordCloud，stylecloud)

python Format()函数的用法___实例详解（一）(全，例多）___各种格式化替换，format对齐打印	用代码写出浪漫__合集（python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心）	python爱心源代码集锦（18款）

Python中Print()函数的用法___实例详解(全，例多）	Python函数方法实例详解全集(更新中...)	《 Python List 列表全实例详解系列（一）》__系列总目录、列表概念

用代码过中秋，python海龟月饼你要不要尝一口？	python练习题目录

草莓熊python turtle绘图（风车版）附源代码	草莓熊python turtle绘图代码（玫瑰花版）附源代码	草莓熊python绘图（春节版，圣诞倒数雪花版）附源代码



巴斯光年python turtle绘图__附源代码	皮卡丘python turtle海龟绘图（电力球版）附源代码



Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程（超详细）	色彩颜色对照表（一）(16进制、RGB、CMYK、HSV、中英文名)	2024年6月多家权威机构____编程语言排行榜__薪酬状况



手机屏幕坏了____怎么把里面的资料导出（18种方法）	【CSDN云IDE】个人使用体验和建议（含超详细操作教程）（python、webGL方向)	查看jdk安装路径，在windows上实现多个java jdk的共存解决办法，安装java19后终端乱码的解决



vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）

2023年春节祝福第二弹——送你一只守护兔，让它温暖每一个你【html5 css3】画会动的小兔子，炫酷充电，字体特	别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码(4套)	SVG实例详解系列（一）(svg概述、位图和矢量图区别（图解）、SVG应用实例）

【程序人生】卡塔尔世界杯元素python海龟绘图（附源代码），世界杯主题前端特效5个（附源码）	HTML+CSS+svg绘制精美彩色闪灯圣诞树，HTML+CSS+Js实时新年时间倒数倒计时(附源代码)	2023春节祝福系列第一弹（上）（放飞祈福孔明灯，祝福大家身体健康）（附完整源代码及资源免费下载）


tomcat11、tomcat10 安装配置（Windows环境）（详细图文）	Tomcat端口配置（详细）	Tomcat 启动闪退问题解决集（八大类详细）