CSS的font-stretch属性与字符胖瘦控制

embedded/2024/10/11 7:32:04/

font-stretch CSS 属性用于选择字体的一个更宽(expanded)或更窄(condensed)的版本,以控制字符的“胖瘦”。然而,需要注意的是,并非所有的字体都支持多种拉伸变体(stretch variants)。如果指定的字体没有可用的拉伸变体,那么浏览器将使用字体的默认样式。

font-stretch 属性可以设置为以下几种值之一,这些值按照从窄到宽的顺序排列:

  • normal:字体的默认宽度。
  • condensed:比正常宽度窄的字体。
  • semi-condensed:比 condensed 宽,但比 normal 窄的字体。
  • expanded:比正常宽度宽的字体。
  • semi-expanded:比 normal 宽,但比 expanded 窄的字体。
  • extra-condensedextra-expandedultra-condensedultra-expanded:这些值提供了比 condensedexpanded 更极端的变体,但并非所有字体都支持这些值。

使用示例

假设你有一个网页,想要改变某个段落文本的字体宽度:

<!DOCTYPE html>
<html>
<head><style>css">.normal {font-family: Arial, sans-serif;font-stretch: normal;}.condensed {font-family: Arial, sans-serif;font-stretch: condensed;}.expanded {font-family: Arial, sans-serif;font-stretch: expanded;}</style>
</head>
<body><p class="normal">这是一段使用正常字体宽度的文本。</p>
<p class="condensed">这是一段使用窄字体宽度的文本。</p>
<p class="expanded">这是一段使用宽字体宽度的文本。</p></body>
</html>

注意:在上面的示例中,Arial 字体可能不支持 condensedexpanded 拉伸变体,所以这些值可能不会按预期改变文本的宽度。为了看到 font-stretch 的效果,你可能需要使用一个支持多种拉伸变体的字体,例如某些 Web 字体服务(如 Google Fonts)提供的字体。

兼容性

font-stretch 属性在大多数现代浏览器中都有良好的支持,但在旧版本的浏览器中可能不受支持或表现不一致。因此,在设计网站时,考虑目标用户的浏览器兼容性是很重要的。

总之,font-stretch 属性提供了一种控制字符胖瘦(即字体宽度)的方法,但需要注意字体的可用性和浏览器的兼容性。


http://www.ppmy.cn/embedded/102570.html

相关文章

(第三十八天)

1 、 harbor 软件包下载 https://github.com/search?qharbor&typerepositories 2 、出现拒绝连接错误&#xff0c;可能是由于容器没开 # 问题解决&#xff1a; [rootdocker ~] # curl localhost:5000/v2/_catalog curl : (7) Failed connect to localhost:5000; 拒绝…

使用 Spring Boot 快速构建 Java Web 应用

1. 什么是 Spring Boot? Spring Boot 是基于 Spring 框架的快速开发工具&#xff0c;它为开发人员提供了一种简单的方式来创建独立、生产级别的 Spring 应用程序&#xff0c;而不需要过多的配置。Spring Boot 通过约定大于配置的理念&#xff0c;简化了项目的搭建过程&#x…

【读点论文】Text detection and localization in scene images: a broad review

Text detection and localization in scene images: a broad review Abstract 如今&#xff0c;文本检测和定位在文本分析系统领域已广受欢迎&#xff0c;因为它们为大量实时应用铺平了道路&#xff0c;例如移动音译技术、视障人士辅助方法等。 文本检测和定位技术用于查找图…

【电控笔记z27】相对位置控制(无前馈)

相对位置控制系统&#xff08;Relative Position Control System&#xff09;是一种用于控制对象之间相对位置的控制系统。在工程应用中&#xff0c;这类系统广泛用于自动化、机器人控制、航空航天、机电设备等领域。系统通过感知和调节两个或多个物体之间的相对位置&#xff0…

Python实现分水岭图像分割算法

目录 Python实现分水岭图像分割算法的详细博客一、引言二、分水岭算法的原理三、Python实现分水岭算法四、算法步骤解析1. 图像预处理2. 计算梯度图像3. 阈值分割4. 距离变换与标记操作5. 分水岭变换五、应用场景:细胞图像分割1. 读取细胞图像2. 应用高斯模糊去除噪声3. 计算梯…

【CVPR‘24】ProxyTTA:域自适应深度补全,Test-Time Adaptation for Depth Completion

【CVPR24】域自适应深度补全:Test-Time Adaptation for Depth Completion 摘要1. 引言2. 相关工作3. 方法3.1 数据模态敏感性研究3.2 准备阶段 - 源域3.3 将代理映射部署到目标域4. 实验5. 讨论摘要 深度补全旨在利用多传感器设置,从稀疏深度图中推断出密集深度图。尽管近年…

python读取配置文件简单封装 公共配置文件 config

之前有做过把爬虫数据写到数据库中的练习,这次想把数据库信息抽离到一个ini配置文件中,这样做的好处在于可以在配置文件中添加多个数据库,方便切换(另外配置文件也可以添加诸如邮箱、url等信息) 1.configparser模块 python使用自带的configparser模块用来读取配置文件,配置…

JS数据类型

下一篇持续更新中… 如有错误欢迎指正&#xff01;&#xff01;&#xff01; 文章目录 前言学习目标学习内容 1. 数据类型简介1.1 为什么需要数据类型1.2 变量的数据类型 2.简单数据类型&#xff08;基本数据类型&#xff09;2.1 数字型 Number数字型进制数字型范围数字型三个…