使用宋体风格的Mac，IOS，Linux的(to use calibri style for mac

由于宋体风格是在有Windows操作系统，但宋体风格是不是有在Linux，MAC，ios.If我的项目只有在宋体其风格（和我strickly必须使用它），所以如果用户使用Linux和运行我的项目，然后我的项目的外观会发生变化，如果我复制/安装在我的Linux中的宋体，将我的系统only.I做了上表明，在我的项目的war文件夹我复制宋体在TTF ，OTF，EOT，WOFF形式，但仍然没有change.So我应该怎么做才能使用宋体风格，因为我使用的所有OSThe CSS。

   .pop
    {
            border:1px solid black ;
            width:500px;
            height:140px;
            background-color: #d1d4d5;
            position:absolute;
            z-index: 1;
            cursor:pointer;
            font-family:calibri;
    }   


  public static native void hello()
 /*-{
        var body=$doc.getElementsByTagName("body")[0];
         var popuptext=$doc.createTextNode(".......");
         popup.className="pop";
         popup.appendChild(popuptext);
 }-*/;           

Answer 1:

如果你在你的系统中的宋体字体，那么你已经上传的服务器上的字体，然后提供CSS的路径。 ofcourse你需要不同类型的格式，所以字体渲染完美对所有的浏览器。

body {
  font-family: 'Calibri', Fallback, sans-serif;
}

@font-face {
  font-family: 'Calibri';
  src: url('Calibri.eot'); /* IE9 Compat Modes */
  src: url('Calibri.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('Calibri.woff') format('woff'), /* Modern Browsers */
       url('Calibri.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('Calibri.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Answer 2:

使用@字体面为你的CSS。

@font-face {
 font-family: "Calibri";
 src: url("url of font file");
}

文章来源: to use calibri style for mac,ios,linux