dapize / fontface-interface-polyfill Goto Github PK

View Code? Open in Web Editor NEW

1.0 1.0 0.0 403 KB

Es un polyfill para la interfaz FontFace, que se usa para cargar las tipografías webs por Javascript.

License: MIT License

HTML 40.74% JavaScript 59.26%

fontface-interface-polyfill's Introduction

Hi, I'm Daniel P Z 👋

A FullStack developer from Perú, yea Machupicchu 😁

🔭 I’m currently working on Globant like FrontEnd developer using React JS + Next JS.
🌱 I’m currently learning all the ecosystem of AWS, is very cool.
👯 I’m looking to collaborate on any interesting project that try to improve the lives of others.
💬 Ask me about any update in the Tecnology world, I enjoy see any news related with that wonderful world.
📫 You can contact to me to any time, just send me a email to [email protected]
😄 Pronouns: Pezeta
⚡ Fun fact: Halo Custom Edition, Left 4 Dead, Counter-strike 1.6 and more.
🎸 I play guitar too, you can see some covers in my Youtube Channel.
💖 I need sponsors to keep my projects maintained.

🛠 Skills and Tools

Projects

My popular projects are as follows: 👇🏼

fontface-interface-polyfill's People

Contributors

Stargazers

Watchers

fontface-interface-polyfill's Issues

Getter: size

Agregar el setter llamado 'size' al constructor FontFace (document.fonts.size)

document.fonts.size

OJO: Retorna el número de tipografías agregadas (document.fonts.add), no cargadas.

Method: clear

Agregar el método 'clear' al constructor FontFaceSet (document.fonts.clear)

document.fonts.clear();

Constructor

convertir objeto document.fonts a 'constructor' llamado 'FontFaceSet' y pasar el único metodo existente hasta el momento 'add' al prototipo de ese constructor.

Method: delete

Agregar el método 'delete' al constructor FontFaceSet (document.fonts.delete)

var waltographUIFont = new FontFace('Waltograph UI', "url('./fonts/WaltographUI-Bold.woff2') format('woff2')", {});
document.fonts.delete(waltographUIFont);

fix(Core): .then method show in style tag

delete the 'font-then' method written in HTML

Method: forEach

Agregar el método 'forEach' al constructor FontFaceSet (document.fonts.forEach)

document.fonts.forEach(function (FontFaceSet) {
   console.log(FontFaceSet)
});

Eventos: onloading, onloadingdone, onloadingerror

Agregar los eventos 'onloading, onloadingdone, onloadingerror' al constructor del FontFaceSet (document.fonts), que realmente son getters y setters realmente.

Documentación:

onloading
An EventListener property called whenever an event of type loading is fired, indicating that a font face set has started to load.
onloadingdone
An EventListener property called whenever an event of type loadingdone is fired, indicating that a font face set has finished loading.
onloadingerror
An EventListener property called whenever an event of type loadingerror is fired, indicating that an error occurred during the loading of a font face set.

Ejemplo

document.fonts.onloadingdone = function (fontFaceSetEvent) {
   alert('onloadingdone we have ' + fontFaceSetEvent.fontfaces.length + ' font faces loaded');
};

Method: check

Agregar método al constructor FontFaceSet (document.fonts), llamado 'check'.

Link de ayuda: https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet/check

Sintaxis del Font css:

font-style: normal|italic|oblique|initial|inherit;
font-variant: normal|small-caps|initial|inherit;
font-weight: normal|bold|bolder|lighter|number|initial|inherit;
font-size/line-height
font-size :medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit;
line-height: normal|number|length|initial|inherit;
font-family: family-name|generic-family|initial|inherit;

loaded promise

el .then de la promesa loaded

omnes.loaded.then(function (objFont) {
   document.fonts.add(objFont);
});

tiene un cruce cuando se usa el conjunto a el 'then' del método .load

waltographUIFont.load()
   .then(function (fontObj) {
      document.fonts2.add(fontObj);
   });

simplemente no es invocada.

Promesa: ready

Adicionar la promesa .ready al constructor

document.fonts.ready().then(function() {
   ...
});

https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet/ready