字体预览效果代码-AA源码网

社区有人需要，也不难，写个小样，有用记得评论一下

代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>字体预览</title>
    <style>
        .container {
            margin: 20px;
        }
        .header {
            font-size: 12pt;
            color: gray;
        }
        .font-preview {
            font-size: 42pt;
            font-weight: bold;
        }
        .controls {
            display: flex;
            align-items: center;
            margin-top: 10px;
        }
        .slider {
            margin: 0 10px;
        }
        .dropdown {
            margin-right: 10px;
        }
        .font1 {
            font-family: Arial, sans-serif;
        }
        .font2 {
            font-family: 'Times New Roman', serif;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">字体选择</div>
        <div class="controls">
            <select id="fontSelector" class="dropdown" onchange="updatePreview()">
                <option value="font1">字体1</option>
                <option value="font2">字体2</option>
            </select>
            <label for="fontSize">A-</label>
            <input type="range" id="fontSize" class="slider" min="10" max="100" value="42" oninput="updatePreview()">
            <label for="fontSize">A+</label>
            <span id="fontSizeValue">42pt</span>
            <input type="color" id="fontColor" value="#000000" onchange="updatePreview()">
        </div> 
        <hr>
        <div class="font-preview" id="fontPreview">字体预览</div>
    </div>
    <p><strong>注意：</strong>本页面由AA源码网免费分享，希望可以保留版权<br>AA源码网：<a href="https://www.aaym.net" target="_blank">https://www.aaym.net</a></p>
    <script>
        function updatePreview() {
            const fontSize = document.getElementById('fontSize').value;
            const fontColor = document.getElementById('fontColor').value;
            const fontPreview = document.getElementById('fontPreview');
            const selectedFont = document.getElementById('fontSelector').value;

            fontPreview.style.fontSize = fontSize + 'pt';
            fontPreview.style.color = fontColor;
            fontPreview.className = 'font-preview ' + selectedFont;
            document.getElementById('fontSizeValue').textContent = fontSize + 'pt';
        }
    </script>
</body>
</html>

温馨提示：若内容/图片/下载链接失效，请在下方留言或登录后私信站长。

本文结束END

本网站名称：AA源码网
默认解压密码：aaym.net
①本站所有资源免费，收取的费用仅为抵扣人工测试和服务器日常维护带来的消耗成本，请须知。
②因源码、模板、插件等程序具有可复制性，一经出售概不退款。
③本站部分资源来源网络或者用户投稿，如有侵权请联系删除（aaym@foxmail.com）
④本站资源仅用于个人学习和交流，如用于商业使用请选择正版程序。使用非正版程序须在24小时内卸载删除。
➣详细的版权声明请点击文章版权声明查看。
**下载/阅读均默认代表您已详细阅读版权声明并同意承担可能造成的所有损失及后果！

THE END