在线字体预览效果代码

2024-07-25 10:03 • 程序源码 • 阅读 243

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

<!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>

免责声明

本站提供的一切软件、教程和内容信息仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络收集整理，如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
如若转载，请注明出处：https://www.zxperson.com/42.html

追风少年

243 0

哔哩哔哩纯净模式油猴脚本

上一篇 2024-07-25 10:00

在线多人飞机大战小游戏html+jquery源码

下一篇 2024-07-26 09:20

在线Base64加解密HTML源码

2024-12-24 09:09 10 0
劳法计算器，全国劳动法数据快速精确计算应用

2024-12-23 09:10 26 0
批量解析快手个人主页所有视频下载工具

2024-12-20 09:35 61 0
免费国外视频搬运工具，卡卡字幕助手VideoCaptioner_1.0无需GPU

2024-12-19 09:02 72 0
PHP本地Ping网站图片版api接口源码

2024-12-16 09:17 94 0
免费在线PHP客服管理系统源码

2024-12-14 09:14 103 0

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

HI ! 请登录

立即登录

免费壁纸小程序

程序源码

在线Base64加解密HTML源码

12-24

劳法计算器，全国劳动法数据快速精确计算应用

12-23

批量解析快手个人主页所有视频下载工具

12-20

免费国外视频搬运工具，卡卡字幕助手VideoCaptioner_1.0无需GPU

12-19

PHP本地Ping网站图片版api接口源码

12-16

免费在线PHP客服管理系统源码

12-14

WordPress子比主题冬季圣诞节设计风格美化插件，冬日奇境

12-12

基于Web的塔罗牌占卜项目源码

12-10

人人影视二十年数据及程序开源分享（附百度网盘下载）

12-09

安卓微商管家_1.0.22 朋友圈营销、清粉批量+好友、解锁会员

12-06

实用软件

AI换脸GIF表情包生成器AIGIF

12-18

TaTa一款图片/视频修复神器，模糊图片变4K

12-17

华硕笔记本轻量级控制中心G-Helper

12-13

微信朋友圈导出工具 Wemo V1.1.0

12-11

AI抠图软件Aiarty Image Matting 2.0 正版注册码

12-05

发票排版助手 - 财务报销人员必备工具

12-03

空壳 • Konker - 应用分身多开

11-30

ChromeAutoBot - 自动化操作 Chrome

11-27

小薯条 – 小红书 AI 涨粉神器

11-26

免费在线压缩网站支持图像、视频、音频、文档、代码文件等压缩

11-25

值得一看

网页版红色警戒

12-19

图一乐：现代版女娲补天

11-14

不老追风少年的日常

11-13

WordPress 标签云函数 wp_tag_cloud() 使用方法详解

10-17

领文心一言4.0会员

10-09

Google 搜索的工作原理：抓取、编入索引、排名和投放

09-28

不错，饿了还可以救急

09-04

怎么混了两个奇怪的东西

08-28

黑神话悟空高清4k壁纸下载，黑神话悟空手机电脑壁纸。

08-26

别骂了别骂了

08-08

每天60s读懂世界

09日04日，星期三，在这里每天60秒读懂世界！

09-04

08日28日，星期三，在这里每天60秒读懂世界！

08-28

07日19日，星期五，在这里每天60秒读懂世界！

07-19

07日18日，星期四，在这里每天60秒读懂世界！

07-19

07日17日，星期三，在这里每天60秒读懂世界！

07-17

07日16日，星期二，在这里每天60秒读懂世界！

07-16

07日15日，星期一，在这里每天60秒读懂世界！

07-15

07日14日，星期日，在这里每天60秒读懂世界！

07-15

07日13日，星期六，在这里每天60秒读懂世界！

07-13

07日12日，星期五，在这里每天60秒读懂世界！

07-12