Sie sind nicht angemeldet.

Embeddded fonts in HTML5?

spacerywirtualne

Profi

Beiträge: 1 117

Wohnort: Poland, Europe

Beruf: krpano developer : virtual tours : the cms4vr owner

  • Nachricht senden

21

Montag, 11. Juli 2016, 21:21

Zitat von »info@totzek.de«

I tried to embed three fonts. Its showing different fonts however.
It's true. I have no clue why *confused*


Kind regards

Piotr
Your own professional, online cloud tool for creating virtual tours - www.cms4vr.com

facebook page :: youtube :: wiki.cms4vr.com

cms4vr team *thumbsup*

Tuur

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

Beruf: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Nachricht senden

23

Dienstag, 9. Mai 2017, 17:57

Hi all,

i found some problems with safari and google fonts since the latest OS updates.
In chrome and firefox it seems no problem.

Visit this page http://www.virtualtuur.com/krpano/font-align-safaribug/1/

the two red boxes are aligned righttop and x=0
refresh the page some times.. on osx it seems to go wrong 50% of the time. (x offset of aprox -20/30 px)
on iOS 100%.. sort of..

When it shows wrong click the second box, then the css will be changed to a none google font, just helvetica.. then it sets it right.

Here an example with no google fonts at all
http://www.virtualtuur.com/krpano/font-align-safaribug/2/
no problems...

*cry*

anyone has a clue?


Tuur *thumbsup*
https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos : https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

24

Mittwoch, 10. Mai 2017, 08:22

Hi,

thanks for the example!

The problem here is the delayed loading of the web-font. When krpano does the alignment and the font is not loaded at that time, it will get the wrong sizes of the text and so the alignment will be wrong.

Here more to make that more visible:

Instead of adding the web-font in the html file like this way:

Quellcode

 
1
2
3
4

@font-face {
  font-family:Fira;
  src: url(fonts/FiraSans-Light.ttf);
}


it would be also possible to load/add it dynamically via Javascript - e.g. like this way in the xml in a krpano Javascript action:

Quellcode

 
1
2
3
4
5
6

<action name="add_web_fonts" autorun="preinit" type="Javascript" devices="html5"><![CDATA[
    var styleNode = document.createElement("style");
    styleNode.type = "text/css";
    styleNode.textContent = "@font-face{ font-family:Fira; src:url('" + krpano.parsepath("tests/FiraSans-Light.ttf") + "'); }";
    document.head.appendChild(styleNode);
]]></action>


When using this way, it's possible to play more with it - e.g. adding 3 second delay before adding the font to make the changes better visible and reproduce-able:

Quellcode

 
1
2
3
4
5
6
7
8

<action name="add_web_fonts" autorun="preinit" type="Javascript" devices="html5"><![CDATA[
    setTimeout( function(){
      var styleNode = document.createElement("style");
      styleNode.type = "text/css";
      styleNode.textContent = "@font-face{ font-family:Fira; src:url('" + krpano.parsepath("tests/FiraSans-Light.ttf") + "'); }";
      document.head.appendChild(styleNode);
    },3000);
]]></action>


When using that code, there would be first the browsers replacement-font visible and then after ~3 seconds when the font is loaded and added, the font of the texts will change, but the position itself will not update.

A solution for that problem would be waiting for the browser until the fonts were loaded. At least in modern browsers there is a (still-experimental) browser API for that:
https://developer.mozilla.org/de/docs/Web/API/FontFaceSet

Here a Javascript code (in a krpano action again) that waits for the font-loading and once done it forces all textfields to update theirself:

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<action name="check_for_web_fonts_loading" autorun="preinit" type="Javascript" devices="html5"><![CDATA[
    function new_fonts_loaded()
    {
        var layers = krpano.get("layer").getArray();
        var hotspots = krpano.get("hotspot").getArray();
            
        var i;
            
        for (i=0; i < layers.length; i++)
        {
            if (layers[i].type == "text")
            {
                // force an update by changing the vcenter setting two times
                layers[i].vcenter = !layers[i].vcenter;
                layers[i].vcenter = !layers[i].vcenter;
            }
        }
            
        for (i=0; i < hotspots.length; i++)
        {
            if (hotspots[i].type == "text")
            {
                // force an update by changing the vcenter setting two times
                hotspots[i].vcenter = !hotspots[i].vcenter;
                hotspots[i].vcenter = !hotspots[i].vcenter;
            }
        }
    }
        
    if (document.fonts)
    {
        document.fonts.addEventListener("loadingdone", new_fonts_loaded, true);
    }
]]></action>


That would work for browsers like Chrome and Firefox, but unfortunately not for iOS 10 because iOS 10 has especially a bug here that causes not firing the 'loadingdone' event for the fonts...

I think I will add the font-loading check directly into krpano, but I'm currently not aware about a 'good' universal solution or workaround for iOS 10...

Best regards,
Klaus

tmhok

Fortgeschrittener

Beiträge: 171

  • Nachricht senden

25

Mittwoch, 10. Mai 2017, 11:02

Good *thumbsup* ！

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »tmhok« (10. Mai 2017, 11:43)

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

26

Mittwoch, 10. Mai 2017, 11:39

Hi,

as the detection of loaded fonts doesn't work in iOS 10 (due an iOS bug), here a solution for loading web-fonts that should work everywhere where web-fonts are supported:

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

<action name="load_web_fonts" autorun="preinit" type="Javascript" devices="html5"><![CDATA[

    if (window.FontFace)
    {
        // the browser has FontFace support

        // load the font
        var fontFace = new FontFace("Fira", "url('tests/FiraSans-Light.ttf')");
        fontFace.load().then( function(loadedFontFace)
        {
            // when loaded, add it
            document.fonts.add(loadedFontFace);
            
            // and update all textfields to make sure the resize and align correctly
            update_textfields();
        });
    }
        
    function update_textfields()
    {
        var layers = krpano.get("layer").getArray();
        var hotspots = krpano.get("hotspot").getArray();
            
        var i;
            
        for (i=0; i < layers.length; i++)
        {
            if (layers[i]._istextfield)
            {
                // force an update by changing the vcenter setting two times
                layers[i].vcenter = !layers[i].vcenter;
                layers[i].vcenter = !layers[i].vcenter;
            }
        }
            
        for (i=0; i < hotspots.length; i++)
        {
            if (hotspots[i]._istextfield)
            {
                // force an update by changing the vcenter setting two times
                hotspots[i].vcenter = !hotspots[i].vcenter;
                hotspots[i].vcenter = !hotspots[i].vcenter;
            }
        }
    }
        
]]></action>


Here the specific font will be directly loaded.

Best regards,
Klaus

Tuur

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

Beruf: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Nachricht senden

27

Mittwoch, 10. Mai 2017, 11:40

Hi Klaus,

thanks for all explanation and code help.
A very nasty problem. Never seen it before the latest OS updates. Some projects are 'broken' sort of.

should this:

Quellcode

 
1

hotspots.vcenter = ![color=#ff0000]layers[/color][i].vcenter;


not be hotspots in those 2 lines?

EDIT: we were posting at the same time.
I will make an example 3 with your code.

I changed the first example a bit.
You can now also click the first red box. Then it will set x to 0 again (not happening) but the code thinks it does.

Somebody got 800 billion dollar to buy apple and fire some engineers?

Tuur *thumbsup*
https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos : https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

Tuur

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

Beruf: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Nachricht senden

28

Mittwoch, 10. Mai 2017, 11:49

Here an 3th example with the last code implemented.

http://www.virtualtuur.com/krpano/font-align-safaribug/3/

Tuur *thumbsup*
https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos : https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

29

Mittwoch, 10. Mai 2017, 11:49

Zitat von »Tuur«

I changed the first example a bit.
You can now also click the first red box. Then it will set x to 0 again (not happening) but the code thinks it does.
That's because the internal layer itself is already at 0, it's the further internal text layer that changes its size and the other layer doesn't know about the font changes.

Therefore the 'load_web_fonts' example above - there the font gets loaded and once loaded the textfield be updated. Then all internal sizes will be correct and the alignment should be okay.

Additionally it would be possible to use that example as base for further improvements - e.g. hide the involved textfields until the font as loaded - and then show them only when the font is there. This would avoid jumping/moving texts.

Best regards,
Klaus

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

30

Mittwoch, 10. Mai 2017, 11:52

Zitat von »Tuur«

Here an 3th example with the last code implemented.

http://www.virtualtuur.com/krpano/font-align-safaribug/3/
Here the:

Quellcode

 
1
2
3
4

@font-face {
font-family:Fira;
src: url(fonts/FiraSans-Light.ttf);
}
could be removed from the html file.

Tuur

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

Beruf: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Nachricht senden

31

Mittwoch, 10. Mai 2017, 12:07

I added a second font face by just copying the whole 'if' thing and changing the names of the font.
Not sure if that is the right way, but it works.

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

<action name="load_web_fonts" autorun="preinit" type="Javascript" devices="html5"><![CDATA[
// load the font FIRA
    if (window.FontFace)
    {
        // the browser has FontFace support

        
        var fontFace = new FontFace("Fira", "url('fonts/FiraSans-Light.ttf')");
        fontFace.load().then( function(loadedFontFace)
        {
            // when loaded, add it
            document.fonts.add(loadedFontFace);
            
            // and update all textfields to make sure the resize and align correctly
            update_textfields();
        });
    }

// load the font JULIUS
    if (window.FontFace)
    {
        var fontFace = new FontFace("Julius", "url('fonts/JuliusSansOne-Regular.ttf')");
        fontFace.load().then( function(loadedFontFace)
        {
            document.fonts.add(loadedFontFace);
            update_textfields();
        });
    }
        
    function update_textfields()
    {
        var layers = krpano.get("layer").getArray();
        var hotspots = krpano.get("hotspot").getArray();
            
        var i;
            
        for (i=0; i < layers.length; i++)
        {
            if (layers[i]._istextfield)
            {
                layers[i].vcenter = !layers[i].vcenter;
                layers[i].vcenter = !layers[i].vcenter;
            }
        }
            
        for (i=0; i < hotspots.length; i++)
        {
            if (hotspots[i]._istextfield)
            {
                hotspots[i].vcenter = !hotspots[i].vcenter;
                hotspots[i].vcenter = !hotspots[i].vcenter;
            }
        }
    }
        
]]></action>


if that should be different or smarter i want to know.

Tuur *thumbsup*
https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos : https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

32

Mittwoch, 10. Mai 2017, 14:47

Here an example for loading several fonts:

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

if (window.FontFace)
{
    var fonts_to_load = [];
        
    fonts_to_load.push( (new FontFace("Fira",   "url('fonts/FiraSans-Light.ttf')")).load() );
    fonts_to_load.push( (new FontFace("Julius", "url('fonts/JuliusSansOne-Regular.ttf')")).load() );
    fonts_to_load.push( (new FontFace("Font3",  "url('...')")).load() );
    // ...
        
    Promise.all( fonts_to_load ).then( function(loaded_fonts)
    {
        loaded_fonts.forEach( function(font){ document.fonts.add(font); } );
            
        update_textfields();
    });
}

Tuur

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

Beruf: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Nachricht senden

33

Mittwoch, 10. Mai 2017, 15:06

*love*
https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos : https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

Tuur

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

Beruf: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Nachricht senden

34

Mittwoch, 24. Mai 2017, 16:11

Hi,

It seems the 'edge' browser still gives problems... like it doesn't accept text-align center... or so..
Not sure if this has something to do with the stuff above..
I tried in my tour the old and new option for this text thing but it seems to make no difference on ' Edge'.
Is this a known issue?
Is the only option to use for device edge renderer css3d or graphics?

A bit hard, i have no edge running, so that's why i ask.
On mac, all browsers it's fine.

Tuur *thumbsup*
https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos : https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

jordi

Profi

Beiträge: 583

Wohnort: Barcelona

Beruf: creating ideas & coding them

  • Nachricht senden

35

Dienstag, 18. Juli 2017, 08:17

What should we do if we want to load more than one url for each font so we can make it compatible with all browsers ?

Quellcode

 
1
2
3
4
5
6
7
8

@font-face {
font-family: 'myfont';
src: url('fonts/myfont.eot'); /* IE9 Compat Modes */
src: url('fonts/myfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('fonts/myfont.woff') format('woff'), /* Pretty Modern Browsers */
	url('fonts/myfont.ttf')  format('truetype'), /* Safari, Android, iOS */
	url('fonts/myfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
everpano.com step beyond 360

jordi

Profi

Beiträge: 583

Wohnort: Barcelona

Beruf: creating ideas & coding them

  • Nachricht senden

36

Donnerstag, 14. September 2017, 11:02

I get that error in version 1.19-pr12

ERROR: loadwebfonts(loadwebfonts) - invalid variable name: 123456




same here

Quellcode

 
1
2
3

<action name="setFonts" autorun="preinit" >
    set(font-bold, 'Roboto-Bold');
</action>


ERROR: set(font-bold,Roboto-Bold) - invalid variable name: 123456

seems like preinit is doing something wrong
everpano.com step beyond 360

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

37

Donnerstag, 14. September 2017, 11:16

Hi,

can you please show the full example?

Best regards,
Klaus

jordi

Profi

Beiträge: 583

Wohnort: Barcelona

Beruf: creating ideas & coding them

  • Nachricht senden

38

Donnerstag, 14. September 2017, 12:16

I think it comes from another side, I've been checking more deeply, and I saw it was beacause a initvar, that has numbers as value. so let's say you can try it like this :

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

embedpano({
	swf:"tour.swf", 
	id:"krpanoviewer",
	xml:"tour.xml", 
	target:"pano", 
	html5:"prefer+webgl+preservedrawingbuffer", 
	consolelog:"true",
	initvars:{								
		newvar:"123456",
		oldvar:"abcde"
	},
	passQueryParameters:true, 
	mwheel:true,
	focus:true
		 
});



and on tour.xml

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<action name="skin_deeplinking_update_url_process">
	copy(adr, browser.location);
	indexoftxt(qi, get(adr), '?');
	if(qi GT 0, subtxt(adr, adr, 0, get(qi)));
	copy(si, scene[get(xml.scene)].index);
	copy(h, view.hlookat);
	copy(v, view.vlookat);
	copy(f, view.fov);
	copy(d, view.distortion);
	copy(a, view.architectural);
	clamp(d, 0.0, 1.0);
	clamp(a, 0.0, 1.0);
	set(pp, calc(f LT 10 ? 6 : 2));
	roundval(h, get(pp));
	roundval(v, get(pp));
	roundval(f, get(pp));
	roundval(d, 2);
	roundval(a, 1);
	set(adr, calc(adr + '?' + newvar + '&amp;startscene=' + si + '&amp;startactions=lookat('+h+','+v+','+f+','+d+','+a+');'));
	js( history.replaceState(null, document.title, get(adr)); );
</action>
everpano.com step beyond 360

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

39

Donnerstag, 14. September 2017, 18:04

Hi,

by:

Quellcode

 
1

initvars:{ newvar:"123456",
and:

Quellcode

 
1

set(adr, calc(adr + '?' + newvar + '&amp;
you're trying to define a variable named '123456' when reloading the page - and using a number as variable name is not allowed and therefore the error.

Best regards,
Klaus

jordi

Profi

Beiträge: 583

Wohnort: Barcelona

Beruf: creating ideas & coding them

  • Nachricht senden

40

Donnerstag, 14. September 2017, 18:27

But it's not the name of the variable, it's the value *wacko*

ahh yeah it's the name of variable once I put it on url ...

will need to find a new solution thanks and sorry for the inconveniences
everpano.com step beyond 360

Ähnliche Themen