时间戳

首页 > 解决方案 > 可变字体滑块

javascript - 可变字体滑块

问题描述

对于一个学校项目，我正在研究使用可变字体的优势。所以我试图创建几个滑块来操纵字体。

在此我使用 Gingham 可变字体。

我已经设法让字体粗细滑块工作，但我不能为宽度滑块工作，我似乎无法解决？我想知道是否有人知道我做错了什么？

这是我的 HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Variable Fonts</title>
  <link rel="stylesheet" href="css/master.css">
</head>
<body>

  <h1>Adjust the sliders to modify the Variable Font: Gingham</h1>

  <p id="testarea" contenteditable="true">Type Text Here</p>

  <label for="slider_weight">Weight</label>
  <input type="range" id="slider_weight" name="slider" value="300" min="300" max="700" step="10">
  <span id="value_weight"></span>
  <br>

  <label for="slider_width">Width</label>
  <input type="range" id="slider_width" name="slider" value="100" min="10" max="100" step="1">
  <span id="value_width2"></span>

<script src="js/slider.js" charset="utf-8"></script>
</body>
</html>

这是我的 JavaScript：

document.getElementById('slider_weight').addEventListener("input", function () {
  var axisValue = document.getElementById('slider_weight').value;

  document.getElementById('testarea').style.fontWeight = axisValue;

  document.getElementById('value_weight').innerText = axisValue;
});

document.getElementById('slider_width').addEventListener("input", function () {
  var axisValue2 = document.getElementById('slider_width').value;

  document.getElementById('testarea').style.fontStretch = axisValue2;

  document.getElementById('value_width2').innerText = axisValue2;
});

提琴手

标签： javascriptcss

解决方案

推荐阅读