opentype for pixi v5 ported
by Bouh
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Type exemple</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.3/pixi.min.js"></script>
<script src="https://www.studiokori.com.br/typeExample/1.7/js/type.min.js" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript">
//creating loader to load fonts
var loader = new type.Loader();
//adding fonts using add method
//example: .add('century', 'fonts/century.ttf');
loader.add('monogram', 'https://cdn.jsdelivr.net/gh/pilssken/assets/fonts/monogram.ttf');
loader.add('playtime', 'https://www.studiokori.com.br/typeExample/1.7/fonts/playtime.ttf');
//adding listener to verify when fonts have been loaded
loader.once('loadComplete', init);
//load fonts
loader.load();
function init() {
PIXI.settings.ROUND_PIXELS = true;
PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;
PIXI.settings.PRECISION_FRAGMENT = PIXI.PRECISION.LOW;
//creating PIXI
var app = new PIXI.Application({
backgroundColor: 0xffffff,
width: 1024,
height: 500,
antialias: false,
autoDensity: true,
});
document.body.appendChild(app.view);
//creating TEXT with area 600x600 px
var myText = new type.text.TextField(600, 600);
//seting text with tags for style
//exemple: .setText('text', styleObject)
myText.setText(
'<tag>Nada do que é <into>social e humano</into> é mais\nreal que as <anothertag>utopias.</anothertag> Na sua vertente eutópica,\nas utopias constituíram sempre o fundamento <under>simbólico e mítico</under>...</tag>', {
align: 'justify',
tag: {
fontFamily: "monogram",
fontSize: 32,
fill: "red"
},
into: {
fontFamily: "monogram",
fontSize: 16,
...