krpano(HTML5 viewer)中使用自定义字体样式

通常设备内置的字体是有限的,而且往往也不是我们想要的效果。我们需要也希望能够在krpano中(HTML5内核下)使用自定义的字体样式。下面是演示效果,一个是自定义的中文字体一个是英文字体。

krpano(HTML5 viewer)中使用自定义字体样式
krpano(HTML5 viewer)中使用自定义字体样式

 

第一步:下载字体

假设我们想要安卓字体Roboto Regular 。点连接下载字体。我们将字体压缩包解压,将TFF文件放在我们的项目下面的路径中。例如我们将字体放在files/fonts/ 路径中。

第二步:编辑HTML文件

打开html文件,将下面的代码放在head中

<head>
    <style>
        @font-face {
            font-family: Roboto-Bold;
            src: url(files/include/font/Roboto-Bold.ttf);
        }
        @font-face {
            font-family: Roboto-Regular;
            src: url(files/include/font/Roboto-Regular.ttf);
        }
    </style>
</head>

因为我们想用两个字体Roboto-Bold和Roboto-Regular,所以我们用了两个font-face。

 

第三步:编辑XML文件

在xml的textfield层中的css属性中使用该字体

<layer name="title"
       background="false"
       css="font-family:Roboto-Bold; font-size:24px; color:#000000;"
       html="Living Room"
       url="%SWFPATH%/plugins/textfield.swf"
       />
 
<layer name="description"
       background="false"
       css="font-family:Roboto-Regular; font-size:18px; color:#000000;"
       html="The living room is one of the most important rooms in your house."
       url="%SWFPATH%/plugins/textfield.swf"
       />

只要在css属性的font-family调用字体的名字就可以了。字体的名字实际上就是字体文件的名字,如tif或otf文件的名字。

注意,如果使用中文字体,方法一样,但中文字体比英文字体体积更大,有可能影响体验。

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值