CSS `Pressure Sensitive Displays` (压感显示) 结合 `font-variation-settings` 改变字体粗细 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

哈喽！各位观众老爷们，今天咱们来聊点刺激的——CSS压感显示结合font-variation-settings玩转字体粗细！这可不是什么花拳绣腿，而是能让你网页排版瞬间高大上的黑科技！准备好了吗？系好安全带，咱们发车啦！

第一站：压感显示，是啥玩意？

首先，我们要搞清楚什么是“压感显示”。简单来说，它就是指屏幕能感知你手指按压的力度，并根据这个力度做出不同的反应。比如，你轻轻一点，可能只是选中；用力一按，就直接打开了。

虽然目前在桌面端网页应用中，压感显示的应用还不是特别普及（毕竟谁没事在电脑屏幕上用力戳戳戳呢？），但在支持压感笔的设备（比如平板电脑）上，或者未来的触摸屏设备上，这玩意儿的潜力可大了！

想象一下，你在一个设计网站上用压感笔画画，笔尖越用力，线条就越粗，这感觉是不是很棒？或者在一个阅读App里，你按压屏幕的力度越大，字体就越粗，方便你集中注意力，简直不要太贴心！

第二站：font-variation-settings，字体的变形金刚！

接下来，我们来认识一下font-variation-settings。这玩意儿是CSS里专门用来控制可变字体的。

什么叫可变字体？传统的字体文件，每种字重（比如细体、粗体）都需要一个单独的文件。而可变字体，把所有字重的信息都包含在一个文件里，你可以通过font-variation-settings来自由调整字体的各种参数，比如粗细、宽度、倾斜度等等。

font-variation-settings的语法是这样的：

font-variation-settings: "tag1" value1, "tag2" value2, ...;

其中，tag是字体的可变参数的标签，value是参数的值。最常用的标签就是wght，它代表字体的粗细（weight）。

举个例子，如果你想把字体的粗细设置为500，就可以这样写：

font-variation-settings: "wght" 500;

第三站：压感 + 可变字体，碰撞出火花！

现在，让我们把压感显示和font-variation-settings结合起来，看看能玩出什么花样。

我们的目标是：根据用户按压屏幕的力度，动态改变字体的粗细。

实现这个功能，需要用到一些JavaScript代码来监听触摸事件，获取触摸力度，然后将力度值传递给CSS的font-variation-settings属性。

下面是一个简单的示例代码：

<!DOCTYPE html>
<html>
<head>
<title>压感字体</title>
<style>
body {
  font-family: sans-serif;
}

.pressure-text {
  font-family: "YourVariableFont"; /* 替换成你的可变字体 */
  font-size: 48px;
  font-variation-settings: "wght" 400; /* 初始粗细 */
  user-select: none; /* 禁止选中文字 */
}
</style>
</head>
<body>

<div class="pressure-text" id="pressureText">
  按压我！
</div>

<script>
const pressureText = document.getElementById('pressureText');

pressureText.addEventListener('touchstart', handleTouchStart, false);
pressureText.addEventListener('touchmove', handleTouchMove, false);
pressureText.addEventListener('touchend', handleTouchEnd, false);
pressureText.addEventListener('touchcancel', handleTouchEnd, false);

let initialWeight = 400; // 初始字重
let maxWeight = 900; // 最大字重
let minWeight = 100; // 最小字重

function handleTouchStart(event) {
  // 阻止默认行为，防止滑动页面
  event.preventDefault();
}

function handleTouchMove(event) {
  event.preventDefault(); //阻止默认行为
  if (event.touches && event.touches.length > 0) {
    const touch = event.touches[0];
    // 模拟压力值，实际设备会有压力值
    const pressure = touch.force || 0.5; //如果force不可用，给一个默认值

    // 将压力值映射到字重范围
    let weight = initialWeight + (maxWeight - initialWeight) * pressure;

    // 限制字重在最大值和最小值之间
    weight = Math.max(minWeight, Math.min(maxWeight, weight));

    // 应用字重
    pressureText.style.fontVariationSettings = `"wght" ${weight}`;
  }
}

function handleTouchEnd(event) {
    pressureText.style.fontVariationSettings = `"wght" ${initialWeight}`; //松开时恢复初始值
}

</script>

</body>
</html>

代码解释：

HTML结构：
- 一个简单的div元素，id为pressureText，用来显示文字。
- class为pressure-text，用于应用CSS样式。
CSS样式：
- font-family: 设置为你的可变字体。你需要替换"YourVariableFont"为你的字体名称。
- font-size: 设置字体大小。
- font-variation-settings: 设置初始字重为400。
- user-select: none: 禁止用户选中文字，避免影响体验。
JavaScript代码：
- 事件监听：监听touchstart（触摸开始）、touchmove（触摸移动）、touchend（触摸结束）和touchcancel（触摸取消）事件。
- handleTouchStart函数：阻止触摸事件的默认行为，防止滑动页面。
- handleTouchMove函数：
  - 获取触摸对象。
  - 获取触摸压力值。这里使用touch.force属性，如果设备不支持force属性（例如桌面浏览器），则提供一个默认值0.5。
  - 将压力值映射到字重范围。使用线性映射，将压力值从0到1映射到字重范围initialWeight到maxWeight之间。
  - 限制字重在最大值和最小值之间，确保字重不会超出可变字体的范围。
  - 应用字重。使用pressureText.style.fontVariationSettings更新字重。
- handleTouchEnd函数：
  - 在触摸结束时，将字重恢复到初始值。

重要提示：

可变字体：你需要使用可变字体才能看到效果。你可以在Google Fonts上找到很多免费的可变字体。记得将font-family设置为你的字体名称。
触摸设备：这段代码需要在支持触摸的设备上运行才能看到效果。在桌面浏览器上，你需要使用开发者工具模拟触摸事件。
压力值：touch.force属性返回的是一个0到1之间的值，代表触摸压力。如果设备不支持force属性，你需要使用其他方法来获取压力值，或者使用一个固定的值来模拟压力。
性能优化: 在touchmove事件中频繁更新font-variation-settings可能会影响性能。你可以使用requestAnimationFrame来优化性能，减少更新频率。
touchcancel事件：当触摸事件被中断时（例如来电），会触发touchcancel事件。你需要处理这个事件，以确保字体恢复到初始状态。

第四站：进阶玩法，让字体更懂你！

上面的代码只是一个简单的示例，你可以根据自己的需求进行扩展。比如：

更复杂的映射：你可以使用非线性映射，让字体粗细的变化更加自然。
多参数调整：除了粗细，你还可以调整字体的宽度、倾斜度等其他参数，让字体更具个性。
动画效果：你可以使用CSS动画，让字体粗细的变化更加平滑。
结合其他传感器：你可以结合其他传感器（比如重力传感器、陀螺仪），让字体根据设备的状态做出不同的反应。

第五站：注意事项，避坑指南！

浏览器兼容性：font-variation-settings的兼容性还不是特别完美，你需要注意兼容性问题。可以使用polyfill来解决兼容性问题。
字体文件大小：可变字体文件通常比单个字体文件大，你需要注意字体文件大小对网页加载速度的影响。
性能问题：频繁更新font-variation-settings可能会影响性能，你需要注意性能优化。
可访问性：你需要确保使用压感字体不会影响网页的可访问性。

第六站：实战演练，代码说话！

我们来一个更高级的例子，结合CSS动画，让字体粗细的变化更加平滑。

<!DOCTYPE html>
<html>
<head>
<title>压感字体 (动画)</title>
<style>
body {
  font-family: sans-serif;
}

.pressure-text {
  font-family: "YourVariableFont"; /* 替换成你的可变字体 */
  font-size: 48px;
  font-variation-settings: "wght" 400; /* 初始粗细 */
  transition: font-variation-settings 0.1s ease-in-out; /* 添加过渡效果 */
  user-select: none; /* 禁止选中文字 */
}
</style>
</head>
<body>

<div class="pressure-text" id="pressureText">
  按压我！
</div>

<script>
const pressureText = document.getElementById('pressureText');

pressureText.addEventListener('touchstart', handleTouchStart, false);
pressureText.addEventListener('touchmove', handleTouchMove, false);
pressureText.addEventListener('touchend', handleTouchEnd, false);
pressureText.addEventListener('touchcancel', handleTouchEnd, false);

let initialWeight = 400; // 初始字重
let maxWeight = 900; // 最大字重
let minWeight = 100; // 最小字重

function handleTouchStart(event) {
  event.preventDefault(); // 阻止默认行为
}

function handleTouchMove(event) {
  event.preventDefault(); // 阻止默认行为
  if (event.touches && event.touches.length > 0) {
    const touch = event.touches[0];
    const pressure = touch.force || 0.5;

    let weight = initialWeight + (maxWeight - initialWeight) * pressure;
    weight = Math.max(minWeight, Math.min(maxWeight, weight));

    // 使用 requestAnimationFrame 优化性能
    requestAnimationFrame(() => {
      pressureText.style.fontVariationSettings = `"wght" ${weight}`;
    });
  }
}

function handleTouchEnd(event) {
  // 使用 requestAnimationFrame 优化性能
  requestAnimationFrame(() => {
    pressureText.style.fontVariationSettings = `"wght" ${initialWeight}`;
  });
}

</script>

</body>
</html>

修改说明：

CSS过渡效果：在.pressure-text样式中添加了transition: font-variation-settings 0.1s ease-in-out;，使得字体粗细的变化更加平滑。
requestAnimationFrame优化：在handleTouchMove和handleTouchEnd函数中，使用requestAnimationFrame来优化性能，减少更新频率。

第七站：总结，敲黑板划重点！

压感显示是一种很有潜力的技术，可以为网页带来更丰富的交互体验。
font-variation-settings是控制可变字体的利器，可以让你自由调整字体的各种参数。
结合压感显示和font-variation-settings，你可以根据用户按压屏幕的力度，动态改变字体的粗细。
你需要注意浏览器兼容性、字体文件大小、性能问题和可访问性。

第八站：作业布置，巩固知识！

找一个你喜欢的可变字体，替换示例代码中的"YourVariableFont"。
修改示例代码，让字体粗细的变化更加符合你的审美。
尝试调整字体的宽度、倾斜度等其他参数。
把你的作品分享给你的朋友们，让他们也感受一下压感字体的魅力！

好了，今天的讲座就到这里。希望大家都能掌握这项黑科技，让你的网页排版更加出色！如果有什么问题，欢迎在评论区留言，我会尽力解答的！ See you next time!

发表回复 取消回复

发表回复取消回复