如何在ABI酷屏自定义组件中引用外部字体

ABI的酷屏功能很强大，能满足我们很多的需求，那么，如何在ABI的酷屏自定义组件中引用外部字体呢？下面我将用一个小例子来告诉你们。

首先，我们需要克隆一个富文本组件，如图所示：

接下来，在全局资源中上传我们下好的字体文件，上传路径如下图：

然后，右键编辑我们刚刚克隆好的组件（在自定义组件中），在text.css中引用我们刚刚上传的字体文件，如图所示：

CSS代码如下：

@font-face{

    font-family:'font2';

    src:url('../vfs/root/products/ebi/sys/coolrpt/coolresource/fonts/TEKO-BOLD.eot');

    src:

        url('../vfs/root/products/ebi/sys/coolrpt/coolresource/fonts/TEKO-BOLD.eot?#iefix') format('embedded-opentype'),

        url('../vfs/root/products/ebi/sys/coolrpt/coolresource/fonts/TEKO-BOLD.woff') format('woff'),

        url('../vfs/root/products/ebi/sys/coolrpt/coolresource/fonts/TEKO-BOLD.ttf') format('truetype'),

        url('../vfs/root/products/ebi/sys/coolrpt/coolresource/fonts/TEKO-BOLD.svg') format('svg');

    font-weight:normal;

    font-style:normal;

}

.textcontent,  .textcontent span{

font-family:font2 !important;

     font-size:16px;

    overflow:hidden;

    word-wrap: break-word;

    word-break: break-all;

    display: inline-block;

    width: 100%;

}

最后，让我们看一下引用后的效果：

这里附加说明一下，如果上传的字体文件不全，有可能在其他浏览器查看的时候会没有效果。

@font-face目前浏览器的兼容性如下：

Webkit/Safari(3.2+)

TrueType/OpenType TT (.ttf) 、OpenType PS (.otf)；

Opera (10+)

TrueType/OpenType TT (.ttf) 、 OpenType PS (.otf) 、 SVG (.svg)；

Internet Explorer

自ie4开始，支持EOT格式的字体文件；ie9支持WOFF；

Firefox(3.5+)

TrueType/OpenType TT (.ttf)、 OpenType PS (.otf)、 WOFF (since Firefox 3.6)

Google Chrome

TrueType/OpenType TT (.ttf)、OpenType PS (.otf)、WOFF since version 6

由上面可以得出：.eot + .ttf /.otf + svg + woff = 所有浏览器的完美支持，快来试试吧！！！