我们有一位客户销售一种产品，客户在结账时会指定礼品信息。 他们的网站非常成功，订单数量超过预期。 到目前为止，他们一直都是手写便笺，用技术术语来说，这扩展性不佳。
当我听说这个问题时，显而易见的解决方案就是停止手写。 或许他们会失去一些手工制作的特色，但这也没那么奇怪了。 这不是一个人写给另一个人的手写便笺，而是一个人打出的便笺，由中间人重写给第三个人。 此外，我的解决方案的想法涉及到一种手写风格的字体！
您能否像从桌面软件那样轻松地做到这一点？ 当然可以。 但通过这种方式（就像可编辑的发票）意味着您可以从任何电脑上执行此操作，而无需担心是否拥有模板或正确的字体或其他任何内容。
复制和粘贴
这个想法很简单。 一个网页上有一个大的文本区域。 文本区域以有趣的笔迹字体设置。 收据电子邮件中收到的礼品信息可以直接复制粘贴到其中。
调整大小
由于礼品信息可以长、短或介于两者之间，我认为能够动态调整文本大小会很有帮助。
视频
仅仅因为快速屏幕录制通常最适合解释事情……
好技巧，你是一位真正的程序员，帮助减少工作并有时间休息。 也就是说……程序员是懒惰的物种，他们总是试图找到一种减少工作量的方法，以便他们有更多时间休息和编程。
是的，abhishek，你说得对，chris 做得非常棒
这有点跑题了，因为你只是展示了一种技术可能性，但如果手写效果消失了，为什么要保留手写字体？ 你知道“媒介即信息”以及所有这些废话：）
我为我哥哥做过类似的事情。 他打印、折叠并层压了大约 200 名大学生运动员的多个定制行李标签。 这比制作 200 多个自定义 psd 好多了……
我没有使用滚动条和最大尺寸，而是使用了离散的文本输入，并让他可以选择根据需要设置每个文本输入的样式。 对于一个晚上快速的工作，我对自己非常满意。 尝试打印一个到 PDF 以查看它们的效果（双面）。
http://usabledesignworks.com/dev/bagtag/
好主意:) 我发现该字体在 Ie8 中有效，但布局无效。 布局在 Firefox 中有效，但即使安装了字体，它也不会显示。
因为它是一次性的事情，我可以明确地告诉我哥哥使用 Firefox，而不必为 IE 进行破解。 我永远不会公开该链接，但 Chris 似乎一直在从事与我相同类型的工作……
字体对你无效真是奇怪——它在我的 Win、Mac 和 Linux 上的 3.1.17 和 3.5.x 版本中对我有效。
无论如何——这是一个快速修复，完成了它的预期工作。 请随意根据需要使用它（如果您找到了更好的方法，请告诉我……）。
太棒了。 我喜欢这样的想法。 我甚至可以设想让页面获取 URL 参数，例如 /dev/bagtag/?first=Kyle&last=Kinnaman，因此从理论上讲，这些参数可以从 Excel 或其他地方创建，他们只需点击、调整、打印即可。
旁注
是的，我最初使用 Typekit 来查找我找到的一个外观很酷的手写字体。 但它无法打印。 然后我一直在寻找一种强制 Typekit 字体打印的方法，但没有取得太大进展。 然后我决定，嘿，也许我只需使用 @font-face 字体，我可以确保它也设置在 @print 媒体中，它应该可以工作，而且确实如此，但它可以打印的真正原因是我还在本地安装了该字体。 哎呀！ 无论如何，就像 Kyle 所说，这些是针对特定人员的一次性解决方案，因此您可以执行非常具体的事情（例如让他们安装字体并使用特定的浏览器）
嗨，Chris。 只是想告诉你，这在 IE8 中不起作用。 字体不会换行。（不过它在 IE8 兼容模式下有效）。对此有什么想法吗？
这绝对是 IE8 中的一个奇怪的错误。 当您向上或向下缩放尺寸时，文本甚至会重复。
我下载了示例并进行了一些修改，您可以通过从文本区域中删除“display: block”并将文本区域的宽度更改为 100% 来修复它。 然后，只需将文本区域包装在一个居中的 div 中，该 div 的宽度为 600px。 似乎是“display: block”与宽度相结合导致了该问题。 也许有更简单的解决方法，但这似乎可以解决问题。
好主意，Chris。 您也许可以使用 CSS3 将文本框旋转几度以使其更具手写感（灵感来自演示和下载按钮下方的图像）
好吧，在 Windows 上的 Firefox 3.6.x 中无法打印——字体已切换为默认字体……
使用 @font-face 打印在我的 Firefox Mac 上不起作用，但它在屏幕录制中有效——我想 Chris 在本地安装了该字体？
我的项目中也遇到了同样的问题（见上文）。 我最初使用的是 Cufon，但它也无法打印。 我不得不使用 @font-face，但这确实要求您在本地安装该字体（因此对于我的项目，我提供了一个字体下载链接）。
如果您将其用作 Chris 预期的内部感谢便笺系统，则可以轻松地将必要的字体推送到所有员工。
喜欢快速屏幕录制的想法..
附言——下次尝试使用更高分辨率的视频。
您应该将此解决方案出售给亚马逊。 这非常简单，但没有被使用。
我认为这将受益于一些文本对齐选项，在我看来，任何礼品卡/贺卡文本的大部分内容都倾向于居中。
尽管如此，它注定可以节省时间，并且是一个很棒的工具，下一步就是消除复制粘贴，并直接从网站生成它o/c
是的，我正在考虑对于真正的客户，将整个礼品信息作为 URL 中的参数传递可能是关键，这样他们就可以点击而无需复制粘贴。
如果您在内部使用它，那是完全合理的。 如果您将 URL 参数公开给全世界，您可能会遇到一些问题，就像 CNN 所做的那样：http://bit.ly/9e5MXQ。 我会发布并彻底清理。
好主意，Chris，但您提到了可扩展性！
当然，为了使它更“可扩展”，为什么不直接将其整合到网站的“管理控制面板”中，以便它自动创建“手写”便笺？ 您可以使用 URL 参数来获得所需的效果？
note.php?msg=Happy+Birthday+Gramps
我只是觉得整个复制粘贴过程没有必要？ 我很想听听您的想法！
很棒的东西……很喜欢
又一位《宋飞正传》的粉丝来报道了。为我们这些其他人准备的节日庆典！
非常巧妙的自定义修复。作为奖励，也许你可以在这里包含你编写的脚本：https://css-tricks.cn/set-font-size-based-on-word-count/
你可能不想将其用作 jQuery UI 滑块的替代品，但它肯定会很好地补充它 :)
Chris，我喜欢你找到新的和有趣的方式来玩可用的工具。对于你作为设计师来说，这是一个更快的解决方案，可以包含像 UI 滑块这样的细节，展示使用 @font-face 的体验，然后为那些想要体验类似事物的人增加周转时间。
此外，如果它真的获得了一些动力，你可以让那些写卡片的人为你提供一些手写字形，然后你可以用这些字形制作字体。
反过来，个性就不会丢失（好吧，只有一点点），就像楼上有人指出的那样。
你真是个聪明的家伙。干得好。让我想为你的解决方案创造我自己的问题。
我以前从未见过这种工作… 这真是太棒了…