html - 挂锁的 Unicode 字形

Question

我需要使用一个看起来像挂锁的 unicode 字符。它用于表单下方的按钮，上面写着“CopyLink __”，上面有一个挂锁，表示当他们复制他们所在页面的链接时，将不会访问“copylink _”版本的页面能够修改表单。

无论如何，我环顾四周 -- this page有很多杂项 unicode 符号，但在音乐尖锐的音符之后，其余符号不会加载。 this link说我应该能够用 ALT+1F513 生成一个挂锁符号 .. 最终是这个符号 ♪，而不是一把锁。最近学会了用chrome的devtools，所以上miscellaneous unicode symbols wikipedia page ，当我看到没有加载音乐尖锐音符之后的所有内容时，我进入了开发工具，找到了所有符号所在的表格，并从 DOM 中删除了元素。我想也许浏览器一次只能加载这么多特殊的 unicode 字符，但我猜页面没有刷新，所以那也不管用，它们仍然显示为🔓 ... twitter bootstrap seems to have a lock icon但似乎我必须为这组图标支付 60 美元……我宁愿避免付钱

Unicode 符号不是唯一可以接受的解决方案——我对任何能够使锁符号或图像顺利出现在 html 按钮中的解决方案都感到满意。如果我必须更改字体没关系，我可以只更改按钮的字体，如果这意味着它将有一个锁定符号。也许是不必要的背景信息我正在使用 PHP..apache，任何字体，但通常是 -- verdana、tahoma、sans-serif

Answer 1

在 SO 上搜索 Unicode 字符是题外话，搜索“Unicode 字形”也是如此，无论它是什么意思。

将问题解释为询问一种在 HTML 文档中包含挂锁符号的方法，有一个简单的答案:如果有一个 Unicode 字符对应于您想要的内容，那么在事实证明可行的情况下使用它;如果不是，请使用以足够大的尺寸创建并缩小为 CSS 使用的字体大小的图像。可行性主要取决于字体。有关一般信息，请参阅我的 Guide to using special characters in HTML .

在这种情况下，假设您搜索合适的 Unicode 字符会找到 LOCK U+1F512 原则上合适，实际上您需要通过 @font-face 使用可下载的字体。在通常安装在人们计算机上的字体中，唯一支持它的字体是 Segoe UI 字体，它们仅在相当新的 Windows 版本上可用。但是，您可以将这些字体放在 font-family 列表的最前面，以避免在不需要时下载字体。

(如果您更喜欢 OPEN LOCK U+1F513，出于某种原因，即使它建议“打开”而不是“锁定”，情况也是一样的:支持其中一个字符的字体也支持另一个。 )

示例(使用 Symbola 字体转换为 Fontie ；FontSquirrel 拒绝转换，显然是因为 Symbola 超过 2 兆字节):

<style>
@font-face {
    font-family:'Symbola-Regular';
    src: url('../Fonts/Symbola/Symbola_gdi.eot');
    src: url('../Fonts/Symbola/Symbola_gdi.eot?#iefix') format('embedded-opentype'),
        url('../Fonts/Symbola/Symbola_gdi.woff') format('woff'),
        url('../Fonts/Symbola/Symbola_gdi.ttf') format('truetype'),
        url('../Fonts/Symbola/Symbola_gdi.svg#Symbola-Regular') format('svg');
}
@font-face {
  font-family: Symbola-Regular;
}
.lock { font-family: Segoe UI Symbol, Symbola-Regular; }
</style>
<span class=lock>&#x1f512;</span>

但是，当您只想要一个图标时，这可能有点矫枉过正。仅使用图像更简单，也许从大尺寸免费字体的 LOCK 字形开始，进行屏幕截图，然后仅使用 img 元素:

<img src=lock.png alt=Locked style="height: 0.8em">