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

【进阶OpenCV】 (3)--SIFT特征提取

文章目录 sift特征提取一、基本原理二、特点三、代码实现1. 函数方法2. 检测图像中的关键点3. 绘制关键点4. 计算关键点描述符5. 输出特征坐标点 总结 sift特征提取 SIFT&#xff08;Scale-Invariant Feature Transform&#xff0c;尺度不变特征变换&#xff09;特征检测是一种…...

HarmonyOS/OpenHarmony Audio 实现音频录制及播放功能

关键词&#xff1a;audio、音频录制、音频播放、权限申请、文件管理 在app的开发过程中时常会遇见一些需要播放一段音频或进行语音录制的场景&#xff0c;那么本期将介绍如何利用鸿蒙 audio 模块实现音频写入和播放的功能。本次依赖的是 ohos.multimedia.audio 音频管理模块&am…...

css 中 ~ 符号、text-indent、ellipsis、ellipsis-2、text-overflow: ellipsis、::before的使用

1、~的使用直接看代码 <script setup> </script><template><div class"container"><p><a href"javascript:;">纪检委</a><a href"javascript:;">中介为</a><a href"javascript:…...

Activiti 工作流大致了解

一、什么是 Activiti 简而言之&#xff0c;就是系统的流程图&#xff0c;如&#xff1a;请假审批流程、账单审批流程等。 二、mysql与pom配置 mysql要使用jdbc:mysql://localhost:3306/activiti?autoReconnecttrue pom文件要添加关键依赖 <!--activiti核心依赖--> &…...

速盾:高防 CDN,网站安全的有力保障

在当今数字化时代&#xff0c;网站安全已成为企业和个人关注的焦点。随着网络攻击手段的不断升级&#xff0c;传统的安全防护措施已经难以满足需求。而高防 CDN&#xff08;Content Delivery Network&#xff0c;内容分发网络&#xff09;的出现&#xff0c;为网站安全提供了有…...

宝塔搭建nextcould 30docker搭建onlyoffic8.0

宝塔搭建nextcould 宝塔搭建nextcould可以参考这两个博文 我搭建的是30版本的nextcould&#xff0c;服务组件用的是下面这些&#xff0c;步骤是一样的&#xff0c;只是版本不一样而已 nginx 1.24.0 建议选择nginx&#xff0c;apache没成功。 MySQL 8.0以上都可以 php 8.2.…...

【源码+文档+调试讲解】交通信息管理系统

摘 要 智能交通信息管理系统是一种基于计算机技术的软件系统&#xff0c;旨在提高交通管理的效率和服务质量。通过该系统可以实现智能交通管理的全面管理和优化。智能交通信息管理系统具备集成管理功能。它能够整合智能交通管理的各个业务环节&#xff0c;包括个人中心、用户管…...

小阿轩yx-案例:Ansible剧本文件实践

小阿轩yx-案例&#xff1a;Ansible剧本文件实践 Playbook 介绍 什么是 playbook playbook 顾名思义&#xff0c;即剧本&#xff0c;现实生活中演员按照剧本表演在 ansible 中&#xff0c;由被控计算机表演&#xff0c;进行安装&#xff0c;部署应用&#xff0c;提供对外的服…...

【ShuQiHere】深入理解微架构(Microarchitecture):LC-3 的底层实现 ️

【ShuQiHere】&#x1f5a5;️ 微架构&#xff08;Microarchitecture&#xff09; 是计算机体系结构中的重要概念&#xff0c;它定义了如何将 指令集架构&#xff08;Instruction Set Architecture, ISA&#xff09; 转化为实际硬件。通过微架构&#xff0c;我们可以理解计算机…...

Ubuntu24.04.1系统下VideoMamba环境配置

文章目录 前言第一步&#xff1a;基本的环境创建第二步&#xff1a;causal-conv1d和mamba_ssm库的安装第三步&#xff1a;安装requirements.txt 前言 VideoMamba环境的配置折磨了我三天&#xff0c;由于Mamba对Cuda的版本有要求&#xff0c;因此配置环境的时候Cuda版本以及各种…...

360的网站怎么做/新网站友链

吟诵&#xff0c;不为吟诵 我们吟诵&#xff0c;不是为了吟诵。我们推广吟诵&#xff0c;也不是为了推广吟诵。我们在做一项大事业——中国文化的重建&#xff0c;吟诵只是其中的一项&#xff0c;虽然是很重要的一项。一百年来&#xff0c;我们走了一条弯路。“五四”先哲们以为…...

wordpress 经典教程/网店交易平台

最近微软透露&#xff0c;它正在尝试一种通过云重置 Windows 10 PC 的方法(Reset this PC)&#xff0c;让用户使用从云端下载的 Windows 文件重置他们的 PC&#xff0c;而不是使用本地恢复镜像。以前&#xff0c;重新安装需要将软件备份副本存储在驱动器或恢复分区中。在 Windo…...

企业备案网站可以做论坛吗/百度下载安装官方下载

CodeIgniter 的错误处理1.CI在引导文件index.php中设置了“执行环境常量 EVIROMENT”&#xff0c;在值为“development”打开php的全部报错。2.在Common文件中&#xff0c;CI载入了Exception类&#xff0c;该类可以让用户使用show_error等函数主动输出错误。3.在Common文件&…...

做外贸要开通哪个网站/南宁网络推广软件

http://blog.csdn.net/ma_jiang/article/details/5962179 1.su oracle 然后启动监听器 1.lsnrctl start 会看到启动成功的界面; 1.lsnrctl stop 停止监听器命令. 1.lsnrctl status 查看监听器命令. oracle数据库的安全包含两部分&#xff1a; 1.一部分是os的安全 2.网…...

个人网站的网页/百度推广公司哪家比较靠谱

采用递归的方式实现基本的四则运算。 首先弄清楚四则运算的优先级&#xff0c;比如一个混杂加法和减法的式子&#xff0c;减法的优先级要高于加法&#xff0c;也就是你从左往右算&#xff0c;先算减法是正确的&#xff0c;先算加法会得到错误的答案。比如3-21&#xff0c;先算…...

手机网站开发与pc网站开发的不同/深圳网络推广公司排名

综述 最近已经在做Tornado的项目 Tornado是基于异步IO的 所以理解异步IO十分重要 理解 &#xff1a;&#xff09;例子来自网络 老张爱喝茶&#xff0c;废话不说&#xff0c;煮开水。 出场人物&#xff1a;老张&#xff0c;水壶两把&#xff08;普通水壶&#xff0c;简称…...