在 mac、ios、linux 上使用 calibri 风格

由于 Windows 操作系统中存在 calibri 样式，但 linux、mac、ios 中不存在 calibri 样式。如果我的项目仅在 calibri 中具有其样式（并且我必须严格使用它），那么如果用户使用linux 并运行我的项目，那么我的项目外观将会改变，如果我在我的 Linux 中复制/安装 calibri，它将仅显示在我的系统上。我已经在项目的 war 文件夹中完成了这一操作，我将 calibri 复制到 ttf 中，otf，eot，woff 形式但仍然没有变化。那么我应该怎么做才能对所有操作系统使用 calibri 样式。我使用的 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);
 }-*/;           

如果您的系统中有 calibri 字体，那么您必须将字体上传到服务器上，然后在 CSS 中提供路径。当然，您需要不同的字体格式，以便字体在所有浏览器上完美呈现。

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 */
}