当前位置: 首页 > 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; 精…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

Linux 下 DMA 内存映射浅析

序 系统 I/O 设备驱动程序通常调用其特定子系统的接口为 DMA 分配内存&#xff0c;但最终会调到 DMA 子系统的dma_alloc_coherent()/dma_alloc_attrs() 等接口。 关于 dma_alloc_coherent 接口详细的代码讲解、调用流程&#xff0c;可以参考这篇文章&#xff0c;我觉得写的非常…...

怎么开发一个网络协议模块(C语言框架)之(六) ——通用对象池总结(核心)

+---------------------------+ | operEntryTbl[] | ← 操作对象池 (对象数组) +---------------------------+ | 0 | 1 | 2 | ... | N-1 | +---------------------------+↓ 初始化时全部加入 +------------------------+ +-------------------------+ | …...

高分辨率图像合成归一化流扩展

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 1 摘要 我们提出了STARFlow&#xff0c;一种基于归一化流的可扩展生成模型&#xff0c;它在高分辨率图像合成方面取得了强大的性能。STARFlow的主要构建块是Transformer自回归流&#xff08;TARFlow&am…...