html嵌入字体效果,在krpano（HTML5 viewer）中使用内嵌字体

通常设备内置的字体是有限的，而且往往也不是我们想要的效果。我们需要也希望能够在krpano中(HTML5内核下)使用自定义的字体。

第一步：下载字体

假设我们想要安卓字体Roboto Regular 。字体下载链接

我们将字体压缩包解压，将TFF文件放在我们的项目下面的路径中。例如我们将字体放在    files/fonts/路径中

第二步：编辑HTML文件

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

XHTML

@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);

}

1

2

3

4

5

6

7

8

9

10

11

12

@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);

}

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

第三步：编辑XML文件

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

XHTML

background="false"

css="font-family:Roboto-Bold; font-size:24px; color:#000000;"

html="Living Room"

url="%SWFPATH%/plugins/textfield.swf"

/>

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"

/>

1

2

3

4

5

6

7

8

9

10

11

12

13

background="false"

css="font-family:Roboto-Bold; font-size:24px; color:#000000;"

html="Living Room"

url="%SWFPATH%/plugins/textfield.swf"

/>

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文件的名字。

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

下面是演示效果，一个是自定义的中文字体一个是英文字体。

进阶研究

VIP课程仅供会员阅读，加入会员请查看网站顶部 加入会员 说明