Chrome浏览器中的下拉列表文字很奇怪

Question

我有一个非常奇怪的错误，仅存在于Google Chrome中。它是一个下拉菜单，用于呈现选项文本，每个字符都替换为Unicode后面的字符。这是一张图片：

正如您所看到的，＆＃34;贷款＆＃34;成为＆＃34; Mpbo＆＃34;。 HTML非常简单：

<select class="form-control" data-val="true" data-val-number="The field LoanId must be a number." 
 data-val-required="The LoanId field is required." id="LoanId" name="LoanId" 
 onchange="this.form.submit();" 
 style="display: inline-block; width: auto; font-size: 12px;">
  <option value="">Loan</option>
  <option>1000001947</option>
  <option>1000002123</option>
  <option>1000003227</option>
  <option>1000003396</option>
</select>

自定义CSS：

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);
body {
font-family: "Source Sans Pro", sans-serif;
background-color: #ecf0f5;
color: #646e79;
font-size: 0.875em;
line-height: 1.4;
}
select {
padding: 0.35em 0.75em;
height: 25px;
line-height: 25px;
background: #ecf0f5;
border: 1px solid #ecf0f5;
color: #323640;
}
button, input, select, textarea {
font-size: 100%;
margin: 0;
vertical-align: baseline;
}
*, *:before, *:after {
box-sizing: border-box;
}
::selection {
background: rgba(100, 110, 121, 0.2);
text-shadow: none;
}

我创建了a JSFiddle但它在Chrome中运行良好，所以我真的不知道这是什么。该站点在ASP.NET MVC 5中使用Twitter Bootstrap 3.0完成。感谢您提供任何帮助。

Answer 1

原来这是我们使用的SVG字体的问题。在我的示例中，我将Google API用于我的@import来源，因为我无法链接到公司服务器上的实际字体文件。一旦我将URL替换为我们的本地文件并将URL直接替换为Google，那么这就解决了我的问题。