字体在线预览网页

Chelpus

已于 2025-04-19 15:41:18 修改

阅读量464

点赞数 5

CC 4.0 BY-SA版权

文章标签：前端 javascript html

于 2025-04-07 17:58:32 首次发布

本文链接：https://blog.youkuaiyun.com/Chelpus/article/details/147049599

字体在线预览

通过html网页上传字体文件以及输入对应内容获取字体预览

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义字体预览</title>
    <style>
        #preview {
            margin-top: 20px;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <h1>自定义字体预览</h1>
    <input type="file" id="fontFile" accept=".ttf,.otf,.woff,.woff2">
    <br><br>
    <label for="customText">输入预览文字：</label>
    <input type="text" id="customText" value="示例文字">
    <br><br>
    <div id="preview">示例文字</div>

    <script>
        document.getElementById('fontFile').addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const fontData = e.target.result;
                    const font = new FontFace('CustomFont', fontData);
                    font.load().then(function(loadedFont) {
                        document.fonts.add(loadedFont);
                        document.getElementById('preview').style.fontFamily = 'CustomFont';
                    }).catch(function(error) {
                        console.error('字体加载失败：', error);
                    });
                };
                reader.readAsArrayBuffer(file);
            }
        });

        document.getElementById('customText').addEventListener('input', function(event) {
            const text = event.target.value;
            document.getElementById('preview').textContent = text;
        });
    </script>
</body>
</html>