CSS内容属性在chrome console.log中显示一个框字符，为什么不显示文本？答案

【问题标题】：CSS content property is displaying a box character in chrome console.log, why not text?CSS内容属性在chrome console.log中显示一个框字符，为什么不显示文本？
【发布时间】：2016-05-02 00:40:38
【问题描述】：

我现在正在使用我制作的自定义图标字体。只是尝试一下我得到了这个。我有我的样式表文件，其中包含我所有的字体及其各自的内容属性及其值，例如.assassin_creed:before {content: "\e018";}
在 chrome 控制台中看到这个类，它给了我类似 .assassin_creed::before {content: "";} 的东西为什么我得到这个框而不是内容值？如何在 chrome 控制台中以文本形式检索其值？？

【问题讨论】：

标签： javascript css fonts console font-face

【解决方案1】：

它是一个无效的escaped unicode字符串，所以如果你使用浏览器中没有加载的中文字体，它会显示Box thats even box。

在 JS 中访问属性值：

 var assassin_creed = document.querySelector('.assassin_creed'), 
      result   = getComputedStyle(assassin_creed, ':before').content;

  console.log('the generated content is: ', result); // returns '\e018'

尝试如下所示以更好地理解：

.assassin_creed:before {
  content: '>\0000a0';
}

类似问题：Font Awesome Showing Box instead of Icons

请参阅 Content CSS 属性以更好地理解：
https://developer.mozilla.org/en/docs/Web/CSS/content
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_before
Adding HTML entities using CSS content

【讨论】：

但是安娜，我制作的包含刺客信条图标的自定义字体在所有（chrome，即firefox，opera）浏览器中都能完美呈现。代码在页面上完美显示图标。我必须使用 javascript 检索其内容值，以便可以采取进一步的行动。为了进一步进行，我必须以文本格式获取值，如“\e018”，而不是像上图中显示的框，那么我如何能够使用 javascript 以文本格式检索它的值..？？