在线字体预览效果代码

程序源码 阅读 151

在其他网站偶然看到的,觉着应该有人会需要这种在线字体预览,大多数是字体网站,也可以放在自己网站当一个小工具使用,需要的自取。


<!DOCTYPE html>
<html>
<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>
        <div>字体选择</div>
        <div>
            <select id="fontSelector" onchange="updatePreview()">
                <option value="font1">字体1</option>
                <option value="font2">字体2</option>
            </select>
            <label for="fontSize">A-</label>
            <input type="range" id="fontSize" 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 id="fontPreview">字体预览</div>
    </div>
    <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>

相关推荐

用户留言

尚未登录无法发表查看留言点击登录

HI ! 请登录

立即登录
免费壁纸小程序
免费壁纸小程序