Question

我想在网站上添加Unicode图标，并且只添加unicode -No自定义字体文件。

我知道我可以这样做：

[class^=icon-facebook]:before {
    content: "\00066";
}
[class^=icon-twitter]:before {
    content: "\01F426";
}
[class^=icon-phone]:before {
    content: "\01F4DE";
}
[class^=icon-fax]:before {
    content: "\01F4E0";
}
[class^=icon-email]:before { 
    content: "\01F4E7";
}
[class^=icon-link]:before { 
    content: "\01F517";
}
[class^=icon-pay]:before {
    content: "\01F4B8";
}
[class^=icon-dollar]:before {
    content: "\01F4B5";
}
[class^=icon-yen]:before {
    content: "\01F4B4";
}
[class^=icon-save]:before {
    content: "\01F4B0";
}

jsFiddle

但是，我正在阅读一些浏览器无法呈现＆＃34;图标＆＃34; （Unicode字符）正确。有时浏览器会显示空方块而不是Unicode字符。

如何对CSS进行编码以防止这种情况发生？

没有自定义字体
没有图片

Answer 1

据我所知，您不想为字体下载或图像下载进行“额外”调用。如果你坚持在CSS中保留所有内容，你可以尝试使用Base64，例如：

<style type="text/css">
div.image {
    width:            14px;
    height:           14px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGMjdBMjVGOTU2NTAxMUUyOUFBN0EzOUYwOEVBMkQ1MCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGMjdBMjVGQTU2NTAxMUUyOUFBN0EzOUYwOEVBMkQ1MCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkYyN0EyNUY3NTY1MDExRTI5QUE3QTM5RjA4RUEyRDUwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkYyN0EyNUY4NTY1MDExRTI5QUE3QTM5RjA4RUEyRDUwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+AND5IAAAAHBJREFUeNpi/P//P4OJiQkDGmAG4r9AzATl/4Oy/zHgAWfOnIFrOAjE/5HwHyj9F4r/I9G48CEGJBdQA4AMZWCBcuypZSo1XUhbAw8SCHBi8EFkA/9TwXH/kCPFYeRFygEqRMoBmuQURlDhQE0AEGAA1LJE38CAHLYAAAAASUVORK5CYII=');
}
</style>

这将放置汉堡包菜单图标。这是一个工作示例：Demo

它在所有浏览器中看起来都一模一样，因为它是图像而不是字体。

你可以在这里制作任何png图像： PNG to Base64

祝你好运：）

Answer 2

但是，我正在阅读一些浏览器无法呈现＆＃34;图标＆＃34;   （Unicode字符）正确。有时浏览器会显示   空方块而不是Unicode字符。

如何对CSS进行编码以防止这种情况发生？

我不确定您是否意味着您只想阻止渲染空方块，或者您希望所有浏览器的字体都相同。

如果您的意思是希望所有浏览器的字体相同，并且不想包含任何字体文件或图像文件，您只需选择所有浏览器支持的字体并进行测试如果他们被正确显示。

以下是您可以尝试在每个可能的浏览器上测试图标的工具： https://spoon.net/browsers

或者，如果您只是想知道字符是否正确显示，并且如果您不希望以其他方式处理错误，则可以找到一种有用的方法。 https://stackoverflow.com/a/1912045/1273587

Answer 3

如果浏览器完全支持Unicode，它将支持所有字符代码。但并非所有字体都包含所有Unicode字符的字符字形。

因此，要获得所需字符的支持，您需要使用具有这些字符的字体（在您的情况下，Web安全的字体），采用所有不同操作系统使用的格式。

Answer 4

到目前为止，还没有一个符合所有标准并符合我们所有技术和设计要求的网络浏览器。

每个浏览器都有自己的功能和限制。这就是为什么我们的开发人员试图了解这些限制并提出替代解决方案，以便我们的应用程序在所有浏览器和所有版本中尽可能无缝且完美地工作。编写跨浏览器兼容代码是一项技能/艺术。

当所有浏览器都标准化并遵循相同规则的那一天，web开发人员（特别是HTML CSS开发人员）的生活将非常简单，也可能没有太多的工作/挑战！ ; - ）

你想要实现的是非常乐观的解决方案，但实际上这是不可能的。这是很难的事实，但你必须消化它，并应该关注其他方式，如何通过可用的替代解决方案（你已经知道）来实现你的目标

如何正确编码UNICODE FONT ICONS，以便在所有浏览器上呈现

4 个答案: