Pixi.js中的自定义字体
Custom font in Pixi.js
我尝试将自定义字体加载到Pixi.js(2D WebGL框架)中。
他们有一个使用.woff谷歌字体的例子:
https://github.com/GoodBoyDigital/pixi.js/tree/master/examples/example%2010%20-%20Text
我将.ttf转换为 .woff 并添加了 css:
@font-face
{
font-family: "HU_Adrien";
src: local('HU_Adrien'), url('HU_A0046.woff') format('woff');;
}
div.font{
font-family: "HU_Adrien";
color: white;
}
它显示在我的 div 中,但不显示在我的 Pixi 阶段。
...
// create a text object with a nice stroke
var spinningText = new PIXI.Text("I'm fun!", {font: "160px HU_Adrien", fill: "#cc00ff", align: "center", stroke: "#FFFFFF", strokeThickness: 6});
// setting the anchor point to 0.5 will center align the text... great for spinning!
spinningText.anchor.x = spinningText.anchor.y = 0.5;
spinningText.position.x = 620 / 2;
spinningText.position.y = 400 / 2;
...
您需要
使用此工具将HU_A0046.woff
转换为HU_A0046.XML
并将文件名添加到预加载列表中。然后你应该打电话PIXI.Bitmaptext
例:
...
var loader = new PIXI.AssetLoader(/*more media...*/, ["HU_A0046.xml"]);
var spinningText = new PIXI.BitmapText("I'm fun!", { font: "35px FontName"}); //You can see the font name within the XML
spinningText.position.x = 620 / 2;
spinningText.position.y = 400 / 2;
...
为了在PIXI中使用自定义网页字体,您需要使用谷歌网页字体api。有了它,您可以使用来自Google和其他CDN的网络字体以及您自己的本地Web字体您可以在 https://github.com/typekit/webfontloader 阅读更多信息
<script>
WebFontConfig = {
typekit: { id: 'xxxxxx' },
google: {
families: ['Droid Sans', 'Droid Serif']
},
custom: {
families: ['My Font', 'My Other Font:n4,i4,n7'],
urls: ['/fonts.css']
},
active: function() {
// do something
init();
}
},
active: function() {
// do something
init();
}
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1.5.6/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
在此示例中,字体.css文件可能如下所示:
@font-face {
font-family: 'My Font';
src: ...;
}
@font-face {
font-family: 'My Other Font';
font-style: normal;
font-weight: normal; /* or 400 */
src: ...;
}
@font-face {
font-family: 'My Other Font';
font-style: italic;
font-weight: normal; /* or 400 */
src: ...;
}
@font-face {
font-family: 'My Other Font';
font-style: normal;
font-weight: bold; /* or 700 */
src: ...;
}
*在呈现字体后开始使用字体很重要
*使用以下工具转换字体:http://www.font2web.com/
*它将为您提供所需的Web字体文件以及自定义字体的CSS代码
安装 .woff 文件(无需转换或位图文本)并添加后,它在我的 pixi 4 应用程序中工作
font: "24px Open Sans Regular"
到我的貔貅风格定义。
字体.css
@font-face {
font-family: 'Open Sans Regular';
src: url('/font/OpenSans-Regular.woff');
/* format("woff"); // it never worked with a format */
}
应用.js
var WebFont = require("webfontloader");
let WebFontConfig = {
custom: {
families: ['Open Sans:300,400italic,500italic,600italic,700italic,400,500,600,700'],
urls: ['/css/fonts.css']
}
};
WebFont.load(WebFontConfig);
webpack.config.js
module.exports = {
entry: {
main: "./src/app.ts",
// vendor: [
// "webfontloader"
// ]
},
output: {
filename: "./bundle.js",
},
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
alias: {
"webfontloader": path.resolve(__dirname, "./node_modules/webfontloader/webfontloader.js")
},
// Add '.ts' as resolvable extensions.
extensions: [".ts", ".js"]
}, …
确保安装
npm install webfontloader --save
npm i -D @types/webpack-env
相关文章:
- PhoneGap选项卡栏自定义字体,背景图案
- 画布上的自定义字体仅适用于safari
- 如何将自定义字体轻松地放入HTML5画布中
- $.width()在使用自定义字体时返回不同的结果
- 我可以在ebay中使用谷歌网页字体api或任何类型的自定义字体吗
- 正在网站上上载自定义字体
- 自定义字体未在ionic中加载
- 使用 IE 10 的画布中的自定义字体
- 使用用户尚未安装的自定义字体
- Pixi.js中的自定义字体
- 在按钮上使用自定义字体
- 我如何使用与使用react native的ios相同的android自定义字体
- 可以在服务器上查看自定义字体,但不能在本地查看
- 包含自定义字体文本的元素的jQuery height()似乎不一致
- 是否可以在您的网站上嵌入自定义字体/将其安装在主机上
- 用原生移动字体而不是自定义字体加载网站的最佳方式
- 如何在结构文本对象中应用自定义字体
- 使用Adobe Edge的Phonegap自定义字体
- 如何确保自定义字体被加载
- 检测自定义字体何时加载