js怎么引入tff字体

引入TFF字体的最佳方法包括以下几种：使用CSS @font-face规则、利用Web字体服务、通过JavaScript动态加载。其中，使用CSS @font-face规则是最常见且高效的方法。@font-face规则允许您在网页中使用自定义字体，而无需依赖用户系统中的字体库。

一、使用CSS @font-face规则

1.1、引入TFF字体文件

首先，需要准备好TFF字体文件，并将其存放在项目的某个目录下。然后，在CSS文件中使用@font-face规则引入该字体。

@font-face {
    font-family: 'CustomFont';
    src: url('fonts/CustomFont.tff') format('truetype');
}
body {
    font-family: 'CustomFont', sans-serif;
}

在上述代码中，url('fonts/CustomFont.tff') 是字体文件的路径，根据实际项目结构调整路径。

1.2、使用字体

引入字体后，可以通过CSS中的font-family属性在页面中使用自定义字体。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Custom Font Example</title>
</head>
<body>
    <h1>Hello, Custom Font!</h1>
</body>
</html>

在styles.css文件中：

h1 {
    font-family: 'CustomFont', sans-serif;
}

二、利用Web字体服务

2.1、Google Fonts

Google Fonts是最常见的Web字体服务之一。虽然它不直接支持TFF格式，但可以通过转换或选择其他格式的字体实现类似效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Roboto', sans-serif;
        }
    </style>
    <title>Google Fonts Example</title>
</head>
<body>
    <h1>Hello, Google Fonts!</h1>
</body>
</html>

2.2、Adobe Fonts

Adobe Fonts（以前称为Typekit）也提供了丰富的Web字体选择。注册并选择所需字体后，Adobe Fonts会提供一段代码供你嵌入到HTML中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
        (function(d) {
            var config = {
                kitId: 'your-kit-id',
                scriptTimeout: 3000,
                async: true
            },
            h = d.documentElement, t = setTimeout(function() {
                h.className = h.className.replace(/bwf-loadingb/g, "") + " wf-inactive";
            }, config.scriptTimeout),
            tk = d.createElement("script"), f = false, s = d.getElementsByTagName("script")[0], a;
            h.className += " wf-loading";
            tk.src = 'https://use.typekit.net/' + config.kitId + '.js';
            tk.async = true;
            tk.onload = tk.onreadystatechange = function() {
                a = this.readyState;
                if (f || a && a != "complete" && a != "loaded") return;
                f = true;
                clearTimeout(t);
                try {
                    Typekit.load(config);
                } catch (e) {}
            };
            s.parentNode.insertBefore(tk, s)
        })(document);
    </script>
    <style>
        body {
            font-family: 'your-font-family', sans-serif;
        }
    </style>
    <title>Adobe Fonts Example</title>
</head>
<body>
    <h1>Hello, Adobe Fonts!</h1>
</body>
</html>

三、通过JavaScript动态加载

3.1、使用JavaScript动态加载TFF字体

有时候需要在运行时动态加载字体文件，特别是在单页应用中。可以使用JavaScript来实现这一点。例如，利用Web Font Loader库。

首先，引入Web Font Loader库：

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>

然后，通过JavaScript配置加载自定义字体：

<script>
    WebFont.load({
        custom: {
            families: ['CustomFont'],
            urls: ['styles.css']
        }
    });
</script>