html5 引用外部字体,白鹭引用外部字体-Egret社区-教程文档-白鹭引擎-Egret Engine-免费开源HTML5游戏引擎 - Powered by Discuz!...

本帖最后由 逆战拆迁 于 2019-7-29 11:40 编辑

依据网上文档整理的白鹭如何加载外部字体，主要是如何操作。

测试时引擎版本为5.2.11。

第一种参考@font-face[mw_shl_code=css,true]

font-family:"muyao";

src:url("./font/muyao.ttf") format('truetype'),

url("./font/muyao.woff") format('woff'),

url("./font/muyao.svg#muyao") format('svg'),

url("./font/muyao.eot?#iefix") format('embedded-opentype');

}

div{

font-family: "muyao";

}/**与下面的设置2  二选一，均为进入游戏前即加载*/

html, body {

-ms-touch-action: none;

font-family:"muyao",serif;/*设置2*/

background: #888888;

padding: 0;

border: 0;

margin: 0;

height: 100%;

}

[/mw_shl_code]

【注：muyao为字体名称】

确保字体加载完再进入游戏不影响使用，将原先的启动部分改动如下：

[mw_shl_code=javascript,true]document.fonts.ready.then(success, fail);

function success() {

var xhr = new XMLHttpRequest();

xhr.open('GET', './manifest.json?v=' + Math.random(), true);

xhr.addEventListener("load", function () {

var manifest = JSON.parse(xhr.response);

var list = manifest.initial.concat(manifest.game);

loadScript(list, function () {

egret.runEgret({

renderMode: "webgl", audioType: 0, calculateCanvasScaleFactor: function (context) {

var backingStore = context.backingStorePixelRatio ||

context.webkitBackingStorePixelRatio ||

context.mozBackingStorePixelRatio ||

context.msBackingStorePixelRatio ||

context.oBackingStorePixelRatio ||

context.backingStorePixelRatio || 1;

return (window.devicePixelRatio || 1) / backingStore;

}

});

});

});

xhr.send(null);

}

function fail() {}[/mw_shl_code]

然后在代码中直接设置某文本的fontFamily，只对该文本作用；

或egret.js中修改default_fontFamily，所有默认字体即为该字体，该方式最好修改引擎低层，包括egret.js和egret.min.js，避免编译引擎时项目中的对应文件被覆盖。

此方式可在进入游戏前加载完字体，另

[mw_shl_code=css,true]div{

font-family: "muyao";

}[/mw_shl_code]

与

[mw_shl_code=css,true]font_family:”wanghanzong”,serif;[/mw_shl_code]

可分别赋不同字体名同时使用达到游戏前加载字体的目的，但是也只能加载两种字体。

第二种

在index.html中加

[mw_shl_code=css,true]@font-face {

font-family:"muyao";

/*src:url("muyao.ttf");*/

src:url("muyao.woff");

}[/mw_shl_code]

并不会触发加载，并且只加此段也可使用字体赋值，但是在赋值时才进行异步加载，并且无回调函数，在web端使用时可能会受网速的影响。

可添加多条@font-face以使用多种字体。

第三种

异步加载，与第一种写法上有相似处；

[mw_shl_code=javascript,true]module message {

export interface Msg {

resMsg(code, data);

}

export class Code {

public static font_complete = 10000;

}

export class Message {

private constructor() { }

private static _ins: Message = null;

public static getIns(): Message {

if (this._ins == null) {

this._ins = new Message

}

return this._ins;

}

private list: { [num: number]: Msg[] } = [];

public addList(code: number, msg: Msg) {

let arr = this.list[code];

if (arr) {

arr.push(msg);

} else {

this.list[code] = [msg];

}

}

public removeList(code: number, msg: Msg) {

let arr = this.list[code];

if (arr) {

let ind = arr.indexOf(msg);

if (ind >= 0) {

arr.splice(ind, 1);

} else {

console.error("监听者不存在");

}

} else {

console.error("监听者数组不存在");

}

}

public sendMsg(code: number, data?) {

let arr = this.list[code];

if (arr) {

let len = arr.length;

for (let i = 0; i < len; i++) {

arr.resMsg(code, data);

}

} else {

egret.error("监听错误，消息号是" + code);

}

}

}

}[/mw_shl_code]

在main.ts中

[mw_shl_code=css,true]declare function loadFont(obj);

interface FontObj {

fontName: string,

urlttf: string

urlwoff: string

}[/mw_shl_code]

暂使用两种字体文件，

eot文件使用为IE4+可用，使用面较窄，svg移动设备支持较好，ttf现使用最广泛，woff愈发广泛。

使用前注意该类实现接口Msg，并

[mw_shl_code=javascript,true]message.Message.getIns().addList(message.Code.font_complete, this);[/mw_shl_code]

使用时

[mw_shl_code=javascript,true]let obj: FontObj = { fontName: "self_font", urlttf: "./font/self_font.ttf", urlwoff: "./font/self_font.woff" };

loadFont(obj);[/mw_shl_code]

[mw_shl_code=javascript,true]resMsg(code, data) {

if (code == message.Code.font_complete) {

if (data == "self_font") {//字体加载完毕

}

}

}[/mw_shl_code]

在index.html中

[mw_shl_code=javascript,true]/*加载时，加载到ttf后不会加载woff，在ttf不存在时加载woff同时报ttf 404，两种文件只加载一种

*/

function loadFont(obj) {

if (document.fonts) {

let fontFamily = obj.fontName;

if (!this.checkFont(obj.fontName)) {

console.log(obj);

let fontFace = new FontFace(obj.fontName, `local('${obj.fontName}'),url('${obj.urlttf}') format('ttf'),url('${obj.urlttf}'),url('${obj.urlwoff}') format('woff')`);

fontFace.load().then(function (loadedFontFace) {

document.fonts.add(loadedFontFace);

console.log("加载完成" + fontFamily);

message.Message.getIns().sendMsg(message.Code.font_complete, fontFamily);

});

} else {

message.Message.getIns().sendMsg(message.Code.font_complete, fontFamily);

}

} else {

//字体错误

}

}

// //检测字体文件是否已加载

function checkFont(name) {

let values = document.fonts.values();

let isHave = false;

let item = values.next();

while (!item.done && !isHave) {

let fontFace = item.value;

if (fontFace.family == name) {

isHave = true;

}

item = values.next();

}

return isHave;

}

[/mw_shl_code]

另外字蛛使用【目的，简化所使用的字体文件】

地址，

【注：muyao为字体名称】

其中标签demo中的内容即为新字体中包含的文本内容，前提是该内容在源.ttf中也存在；

终端运行，例如在桌面上的的d1文件夹下，

[mw_shl_code=shell,true]font-spider /Users/admin/Desktop/d1/index.html[/mw_shl_code]

《《《《《《《《《《《《《《《

补充第四种方案

涉及es5兼容性

兼顾es5下运行，大体上与第三种相似；主要不同在index.html

[mw_shl_code=javascript,true]//使用新版加载

var isNew = false;

if (document.fonts) {

isNew = true;

}

//已加载的字体

var fontsMap = {};

function loadFont(obj) {

if (isNew) {

if (!this.checkFontM(obj.fontName)) {

var fontFace = new FontFace(obj.fontName, "local('" + obj.fontName + "'),url('" + obj.urlttf + "') format('ttf'),url('" + obj.urlttf + "'),url('" + obj.urlwoff + "') format('woff')");

fontFace.load().then(function (loadedFontFace) {

document.fonts.add(loadedFontFace);

fontsMap[obj.fontName] = 1;

console.log("加载完成" + obj.fontName);

message.Message.getIns().sendMsg(message.Code.font_complete, obj.fontName);

});

} else {

message.Message.getIns().sendMsg(message.Code.font_complete, obj.fontName);

}

} else {

if (fontsMap[obj.fontName]) {

} else {

document.styleSheets[0].addRule("@font-face", 'font-family:' + obj.fontName + ';src:url(' + obj.urlttf + '),url(' + obj.urlwoff + ') format("woff");', 1)

console.log("加载" + obj.fontName);

}

message.Message.getIns().sendMsg(message.Code.font_complete, obj.fontName);

}

}

// //检测字体文件是否已加载

function checkFontM(name) {

var values = document.fonts.values();

var item = values.next();

while (!item.done && !iH) {

var fontFace = item.value;

if (fontFace.family == name) {

return true;

}

item = values.next();

}

return false;

}[/mw_shl_code]

修改了es5中不存在的一些符号类型；项目中使用与第三种基本相同，不同的是，

[mw_shl_code=javascript,true]document.styleSheets[0].addRule("@font-face", 'font-family:' + obj.fontName + ';src:url(' + obj.urlttf + '),url(' + obj.urlwoff + ') format("woff");', 1)[/mw_shl_code]

仅是注册字体并在使用时才会启动下载，所以在第一次使用时可先对文本赋值“  ”等过一定时间后再赋正确显示值【防止脏矩形不渲染】，例如：

[mw_shl_code=javascript,true]  let t = 4000;           if (window["fontsMap"][data] == 1) {

t = 0;

} else {

window["fontsMap"][data] == 1

}

cL1.text = "  ";

egret.setTimeout(() => {

cL1.text = "hello";

}, this, t);[/mw_shl_code]