font-family: "Shojumaru",cursive,Arial,serif; , 无法在 IE 上正确显示答案

【问题标题】：font-family: "Shojumaru",cursive,Arial,serif; , is not displaying correctly on IEfont-family: "Shojumaru",cursive,Arial,serif; , 无法在 IE 上正确显示
【发布时间】：2015-02-13 15:37:17
【问题描述】：

我为我的 asp.net MVC Web 应用程序定义了以下 CSS 规则：-

.navbar-brand {
    font-family: "Shojumaru",cursive,Arial,serif;
    font-size: 17px;
    letter-spacing: 0;
    line-height: 120px;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

在 Firefox 和 chrome 上，结果如下：-

在 IE 上，结果将没有“花哨”效果：-

在 Chrome 和 Firefox 上，字体效果可以正确显示，但 IE 会显示不同的字体。如何使所有浏览器上的字体完全相同（如果可能）？

【问题讨论】：

你如何包含字体？如果是谷歌字体，你似乎完全错过了字体定义Google Font Shojumaru
什么版本的 IE？
另外，cursive,Arial,serif 是三种不同的字体变体——草书、无衬线和衬线
@ted 我在我的 CSS 文件中评论了这个“/*@import url(fonts.googleapis.com/css?family=Shojumaru);*/”，以停止从外部网站请求数据，也许这导致了差异？不确定我是否可以下载并包含此字体？
那是你的问题。 Firefox 默认为草书，IE 为 Arial

标签： html css fonts font-family

【解决方案1】：

首先你应该使用@font-face 将你的自定义字体嵌入到css文件中之后固定显示您当前在 IE 中的字体使用此方法：

 src: url('../font/Shojumaru.eot?#iefix') format('embedded-opentype')

例如： @font-face {font-family: 'Yekan'; src: url('../font/Shojumaru.eot'); src: url('../font/Shojumaru.eot?#iefix') format('embedded-opentype'), url('../font/Shojumaru.woff') format('woff'), url('../font/Shojumaru.ttf') format('truetype'); font-weight: normal;font-style: normal;}

【讨论】：

【解决方案2】：

如果您转到https://fonts.googleapis.com/css?family=Shojumaru，它应该显示src: url(https://...).woff2 包含在您的样式表的@font-face 中以及要包含的unicode: U+xxx 代码中。当我将两者都添加到我的 CSS 文件时，它对我有用。

【讨论】：