js 字体代码怎么写

在HTML中使用JavaScript设置字体样式

在HTML中，使用JavaScript设置字体样式是一个常见的需求。使用JavaScript，你可以动态地修改网页元素的字体，达到更好的用户体验和视觉效果。使用JavaScript设置字体样式的主要方法包括：通过CSS类、直接设置内联样式、使用外部样式表。下面我们将详细介绍其中一种方法。

一、使用CSS类设置字体样式

使用CSS类来设置字体样式是一个最佳实践，因为它可以使你的代码更清晰和易于维护。首先，你需要定义一个CSS类，然后使用JavaScript来动态应用这个类。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Change Font with JavaScript</title>
    <style>
        .new-font {
            font-family: Arial, sans-serif;
            font-size: 20px;
            color: blue;
        }
    </style>
</head>
<body>
    <p id="text">This is a sample text.</p>
    <button onclick="changeFont()">Change Font</button>
    <script>
        function changeFont() {
            document.getElementById('text').classList.add('new-font');
        }
    </script>
</body>
</html>

二、直接设置内联样式

直接设置内联样式是一种快速但相对不太推荐的方法，因为它会使HTML和样式耦合，降低代码的可维护性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Change Font with JavaScript</title>
</head>
<body>
    <p id="text">This is a sample text.</p>
    <button onclick="changeFont()">Change Font</button>
    <script>
        function changeFont() {
            var element = document.getElementById('text');
            element.style.fontFamily = 'Arial, sans-serif';
            element.style.fontSize = '20px';
            element.style.color = 'blue';
        }
    </script>
</body>
</html>

三、使用外部样式表

使用外部样式表也是一种推荐的方法，它使得样式与HTML代码分离，便于维护。你可以通过JavaScript动态加载外部样式表，或者通过改变元素的类名来应用外部样式表中的样式。

动态加载外部样式表：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Change Font with JavaScript</title>
    <link rel="stylesheet" id="dynamic-style">
</head>
<body>
    <p id="text">This is a sample text.</p>
    <button onclick="changeFont()">Change Font</button>
    <script>
        function changeFont() {
            var link = document.getElementById('dynamic-style');
            link.href = 'new-style.css';
        }
    </script>
</body>
</html>

new-style.css

#text {
    font-family: Arial, sans-serif;
    font-size: 20px;
    color: blue;
}

四、通过JavaScript库实现

使用JavaScript库（如jQuery）可以简化操作，特别是当你需要进行复杂的DOM操作时。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Change Font with JavaScript</title>
    <style>
        .new-font {
            font-family: Arial, sans-serif;
            font-size: 20px;
            color: blue;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <p id="text">This is a sample text.</p>
    <button id="change-font">Change Font</button>
    <script>
        $(document).ready(function() {
            $('#change-font').click(function() {
                $('#text').addClass('new-font');
            });
        });
    </script>
</body>
</html>

五、响应式设计中的字体调整

在现代Web开发中，响应式设计是一项基本要求。使用JavaScript可以动态调整字体大小，以适应不同设备的屏幕尺寸。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Font Size with JavaScript</title>
</head>
<body>
    <p id="text">This is a sample text.</p>
    <script>
        function adjustFontSize() {
            var width = window.innerWidth;
            var fontSize = width / 30; // Example calculation, you can adjust this
            document.getElementById('text').style.fontSize = fontSize + 'px';
        }
        window.addEventListener('resize', adjustFontSize);
        window.addEventListener('load', adjustFontSize); // Adjust font size on page load
    </script>
</body>
</html>

六、结合CSS变量和JavaScript

CSS变量（Custom Properties）是一种现代的CSS特性，可以和JavaScript结合使用，实现更灵活的样式控制。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Change Font with JavaScript and CSS Variables</title>
    <style>
        :root {
            --font-family: Arial, sans-serif;
            --font-size: 16px;
            --font-color: black;
        }
        #text {
            font-family: var(--font-family);
            font-size: var(--font-size);
            color: var(--font-color);
        }
    </style>
</head>
<body>
    <p id="text">This is a sample text.</p>
    <button onclick="changeFont()">Change Font</button>
    <script>
        function changeFont() {
            document.documentElement.style.setProperty('--font-family', 'Times New Roman, serif');
            document.documentElement.style.setProperty('--font-size', '20px');
            document.documentElement.style.setProperty('--font-color', 'blue');
        }
    </script>
</body>
</html>

七、结合框架和库

在使用现代前端框架如React、Vue.js和Angular时，使用这些框架提供的状态管理和样式绑定功能，可以更容易地实现动态字体样式的设置。

React 示例：

import React, { useState } from 'react';
function App() {
    const [fontStyle, setFontStyle] = useState({
        fontFamily: 'Arial, sans-serif',
        fontSize: '16px',
        color: 'black'
    });
    const changeFont = () => {
        setFontStyle({
            fontFamily: 'Times New Roman, serif',
            fontSize: '20px',
            color: 'blue'
        });
    };
    return (
        <div>
            <p style={fontStyle}>This is a sample text.</p>
            <button onClick={changeFont}>Change Font</button>
        </div>
    );
}
export default App;

Vue.js 示例：

<template>
  <div>
    <p :style="fontStyle">This is a sample text.</p>
    <button @click="changeFont">Change Font</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      fontStyle: {
        fontFamily: 'Arial, sans-serif',
        fontSize: '16px',
        color: 'black'
      }
    };
  },
  methods: {
    changeFont() {
      this.fontStyle = {
        fontFamily: 'Times New Roman, serif',
        fontSize: '20px',
        color: 'blue'
      };
    }
  }
};
</script>

总结

使用JavaScript设置字体样式的方法有很多，具体选择哪种方法取决于你的项目需求和代码结构。使用CSS类、直接设置内联样式、使用外部样式表、通过JavaScript库、响应式设计中的字体调整、结合CSS变量和JavaScript、结合框架和库，这些方法都有各自的优缺点。在实际应用中，推荐使用CSS类和外部样式表的方法，因为它们使得代码更清晰和易于维护。如果你的项目使用了现代前端框架，利用这些框架提供的状态管理和样式绑定功能，可以更加高效地实现动态字体样式的设置。