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

CSS中的font-variation-settings:探索字体的可变性

随着Web字体的发展,设计师们不再局限于传统的字体样式。现代Web字体支持可变字体(Variable Fonts),这种字体允许开发者在单一的字体文件中包含多种字形样式。通过使用CSS中的font-variation-settings属性,我们可以控制这些可变字体的不同特性,从而实现更加灵活的设计布局。

可变字体简介

可变字体允许字体文件包含一系列的设计轴(Design Axes),如宽度(Width)、倾斜度(Slant)、粗细(Weight)等。通过调整这些轴的值,可以实现从一种样式到另一种样式的平滑过渡,而无需加载多个独立的字体文件。

font-variation-settings 属性详解

font-variation-settings 属性允许我们指定一个或多个设计轴及其对应的值。基本语法如下:

font-variation-settings: [ <name>=<value> ]* ;

其中,<name> 是设计轴的名字,而 <value> 则是该轴的具体数值。

示例代码

下面是一个简单的例子,展示了如何使用font-variation-settings来改变字体的粗细和宽度:

/* 使用默认的粗细和宽度 */
p {font-family: 'RobotoVF', sans-serif;font-variation-settings: 'wght' 400, 'wdth' 100;
}/* 改变粗细 */
.bold {font-variation-settings: 'wght' 700, 'wdth' 100;
}/* 改变宽度 */
.wide {font-variation-settings: 'wght' 400, 'wdth' 200;
}/* 同时改变粗细和宽度 */
.bold-wide {font-variation-settings: 'wght' 700, 'wdth' 200;
}

假设我们有一个名为RobotoVF的可变字体,它支持wght(粗细)和wdth(宽度)这两个设计轴。上述CSS定义了四种不同的样式类,用于展示如何根据需要调整字体属性。

如何获取设计轴信息?

在实际应用中,我们需要知道字体文件中具体支持哪些设计轴以及它们的有效范围。这可以通过查看字体文档或者使用工具如FontForge来获取。此外,也可以利用JavaScript来动态获取当前字体的设计轴信息,并相应地设置font-variation-settings

总结一下

font-variation-settings为设计师提供了前所未有的灵活性,在保持页面加载性能的同时,能够创造出丰富多样的视觉效果。随着更多浏览器的支持和可变字体的普及,这一功能将在未来成为Web设计中的重要工具之一。

相关文章:

CSS中的font-variation-settings:探索字体的可变性

随着Web字体的发展&#xff0c;设计师们不再局限于传统的字体样式。现代Web字体支持可变字体&#xff08;Variable Fonts&#xff09;&#xff0c;这种字体允许开发者在单一的字体文件中包含多种字形样式。通过使用CSS中的font-variation-settings属性&#xff0c;我们可以控制…...

组合优化与凸优化 学习笔记5 对偶拉格朗日函数

有的时候约束条件有点难搞&#xff0c;我们可以把它放到目标函数里面。 记得之前凸函数的时候的结论吗&#xff1f;一大堆函数&#xff0c;每一段都取最大的&#xff0c;最后会得到一个凸函数。同理&#xff0c;每一段都取最小的&#xff0c;得到的是一个凹函数。就这样&#x…...

监控易监测对象及指标之:Exchange邮件服务器监测

在现代企业运营中&#xff0c;邮件服务器的作用至关重要&#xff0c;它不仅承载着企业内外的信息传递&#xff0c;还是协同工作的重要工具。为了确保邮件服务器的稳定运行&#xff0c;以及邮件的顺畅收发&#xff0c;采用高效的监控系统是不可或缺的。监控易作为一款专业的监控…...

【机器学习基础】Transformer学习

Transformer学习 梯度消失FeedForward层激活函数的主要作用是在网络中加入非线性变换 梯度消失 梯度爆炸 FeedForward层 Transformer结构: Transformer结构主要分为两大部分: 一是Encoder层结构:Encoder 的输入由 Input Embedding 和 Positional Embedding 求和输入Multi…...

mysql如何不使用窗口函数,去统计出入库情况

mysql如何不使用窗口函数&#xff0c;去统计出入库情况 你把这个表看做 进出库表&#xff0c;每个物料把时间正序后 依次累加数量 &#xff0c;看这个物料的时间线上 是否会出现负数&#xff0c;1号进货5个 2号出库3个 3号你不能出库3个 最多俩个 不然就是负库存&#xff0c;…...

uni-app canvas文本自动换行

封装 支持单行文本超出换行。多行文本顺位排版 // 填充自动换行的文本function fillFeedText({ctx, text, x, y, maxWidth, lineHeight, color, size}) {// 文本配置ctx.setFontSize(size);ctx.setFillStyle(color);// 计算文本换行宽高&#xff0c;换行逻辑const words text…...

【设计模式-职责链】

定义 职责链模式是一种行为设计模式&#xff0c;**它通过将请求发送给链上的多个处理者来避免请求发送者与处理者之间的紧密耦合。每个处理者可以选择处理请求或将其传递给链中的下一个处理者。**这样&#xff0c;可以将处理请求的责任链式组织&#xff0c;从而实现更灵活的请…...

Prompt:在AI时代,提问比答案更有价值

你好&#xff0c;我是三桥君 随着AI技术的飞速发展&#xff0c;我们进入了一个信息爆炸的时代。在这个时代&#xff0c;只要你会提问&#xff0c;AI就能为你提供满意的答案。这种现象让很多人开始思考&#xff1a;在这个答案触手可及的时代&#xff0c;答案的价值是否还像以前…...

whatis命令:关于命令的简短描述

一、命令简介 ​whatis​ 命令用于查询命令、函数、文件等的基本用途&#xff0c;查询结果只是一句简短的描述。 例如 $ whatis ls ls (1) - list directory contents返回关于 ls 命令的简短描述。这个结果实质是来自于man手册的一个章节&#xff0c;在较新的L…...

ICM20948 DMP代码详解(54)

接前一篇文章:ICM20948 DMP代码详解(53) 上一回解析了inv_icm20948_compass_dmp_cal函数的大部分代码,本回继续讲解inv_icm20948_compass_dmp_cal函数的余下内容。为了便于理解和回顾,再次贴出inv_icm20948_compass_dmp_cal函数代码,在EMD-Core\sources\Invn\Devices\Dri…...

RabbitMQ的应用问题

一、幂等性保障 幂等性是数学和计算机科学中某些运算的性质, 它们可以被多次应⽤, ⽽不会改变初始应⽤的结果 数学上的幂等性&#xff1a; f(x)f(f(x)) |x| 数据库操作幂等性&#xff1a; 数据库的 select 操作. 不同时间两次查询的结果可能不同, 但是这个操作是符合幂等性…...

C++14:通过make_index_sequence实现将tuple转换为array

如何将vector转换为array呢 #include <iostream> #include <tuple> #include <array> using namespace std;template <typename V, typename... Types, size_t... I> constexpr auto do_tuple_to_array(tuple<V, Types...>&& tuple, in…...

Linux中修改MySQL密码

Linux中MySQL的密码操作 1、给用户设置/更新密码 mysqladmin -u用户名 -p原密码 password "新密码"该命令在终端直接执行&#xff0c;不需要进入mysql视图 该命令适用于以下情况&#xff1a; 用户的密码为空&#xff0c;为用户设置密码用户密码需要更新&#xff0c…...

华为OD真题机试-英文输入法(Java)

华为OD机试真题中的“英文输入法”题目主要考察的是字符串处理、单词提取、以及基于前缀的单词联想功能。以下是对该题目的详细解析&#xff1a; 题目描述 主管期望你来实现英文输入法单词联想功能。具体需求如下&#xff1a; 依据用户输入的单词前缀&#xff0c;从已输入的…...

【React 】入门Day01 —— 从基础概念到实战应用

目录 一、React 概述 二、开发环境创建 三、JSX 基础 四、React 的事件绑定 五、React 组件基础使用 六、组件状态管理 - useState 七、组件的基础样式处理 快速入门 – React 中文文档 一、React 概述 React 是什么 由 Meta 公司开发&#xff0c;是用于构建 Web 和原生…...

2024年9月总结及随笔之丢卡

1. 回头看 日更坚持了639天。 读《软件开发安全之道&#xff1a;概率、设计与实施》更新完成读《软件设计的要素》开更并更新完成读《构建可扩展分布式系统&#xff1a;方法与实践》开更并更新完成读《数据湖仓》开更并持续更新 2023年至2024年9月底累计码字1555996字&#…...

sql语法学习 sql各种语法 sql增删改查 数据库各种操作 数据库指令

sql语法学习 sql各种语法 sql增删改查 数据库各种操作 数据库指令 学习SQL语法时&#xff0c;理解其基本结构和用法是关键。下面是SQL语法的详细学习指南&#xff0c;涵盖了SQL的主要部分&#xff0c;包括查询、插入、更新、删除、表操作等。 1. 基本查询语法 SQL 的查询语句…...

鸡兔同笼,但是线性代数

灵感来自&#xff1a;bilibili&#xff0c;巨佬&#xff01; 我们有 14 14 14 个头&#xff0c; 32 32 32 只脚&#xff0c;所有鸡和兔都没有变异&#xff0c;头和脚都完整&#xff0c;没有数错。还有什么 Bug 吗 小学奥数 假设全是鸡&#xff0c;则有 14 2 28 14 \time…...

01---java面试八股文——springboot---10题

01-你是怎么理解Spring Boot 的约定优于配置 约定优于配置是一种软件设计的范式&#xff0c;它的核心思想是减少软件开发人员对于配置项的维护&#xff0c;从而让开发人员更加聚焦在业务逻辑上。Spring Boot 就是约定优于配置这一理念下的产物&#xff0c;它类似于 Spring 框架…...

计算机毕业设计 二手图书交易系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…...

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...

服务器硬防的应用场景都有哪些?

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

项目部署到Linux上时遇到的错误(Redis,MySQL,无法正确连接,地址占用问题)

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...