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

Question

由于 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);
 }-*/;           

Answer 1

如果您的系统中有 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 */
}