小学生名字卡（HTML版可打印）

程序员文章站 2024-03-19 07:59:15

...

幼儿园名字卡

快速生成A4规格的小学生名字卡

快速生成A4规格的小学生名字卡

上小学了，提前得知需要制作名字卡放在孩子书桌上，结果几天工作下来都没有时间制作，只能用HTML写一个用来临时打印一个，再用彩笔装饰一下就好了。

于是写好了一个放在了这里（假设孩子叫“张三丰”），用浏览器打开后，修改名字就修改URL name=张三丰 那部分再按个回车就行了。

把网页打印，会先看到一个预览如图所示：
小学生名字卡（HTML版可打印）
我用照片纸打印了一下，找到中线对折一下，双面胶一粘贴搞定。希望有人能用上吧。如果连接失效了，那就自己写一个吧，代码附上：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>名字卡</title>
    <style>
        @media print {
            body {
                margin: 0;
                text-align: center;
            }
        }

        .center-of-page {
            width: 100%;
            text-align: center;
        }

        .name-card {
            font-family: "Yuanti SC", Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
            font-size: 24vw;
            padding: 3vw;
        }

        .rotate-180 {
            transform: rotate(180deg);
        }


        .closer {
            background-color: aliceblue;
            height: 25vh;
            font-size: 5vw;
            color: gray;
        }
    </style>
</head>
<body>

<script>
  var urlData = new URLSearchParams(document.location.search);
</script>
<div class="closer center-of-page">胶水封口处</div>
<div class="name-card rotate-180 center-of-page">
    <script>document.write(urlData.get('name'))</script>
</div>
<div class="name-card center-of-page">
    <script>document.write(urlData.get('name'))</script>
</div>
<div class="closer center-of-page">胶水封口处</div>

</body>
</html>

其中字体还是用中文兼容性比较好的 font-family: "Yuanti SC", Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; 来处理吧。其中第一个是我本地想用的“圆体”。

有问题请留言，有BUG请留言。????