font-family：＆＃34; Shojumaru＆＃34;，草书，Arial，serif; ，在IE上无法正确显示

Question

我为我的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会显示不同的字体。如何在所有浏览器上使字体完全相同（如果可能）？

Answer 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;}

Answer 2

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