html - Google Fonts loading explained -


i'd know, how google fonts finds out, fonts load. example when use inside css

@import '//fonts.googleapis.com/css?family=roboto:300';

it returns css interpreted (the loading of resource blocks browser rendering afaik):

/* cyrillic-ext */ @font-face {   font-family: 'roboto';   font-style: normal;   font-weight: 300;   src: local('roboto light'), local('roboto-light'), url(http://fonts.gstatic.com/s/roboto/v15/0ec6fl06luxeywpbsjvxcix0hvgzzqufrduzrpvh3d8.woff2) format('woff2');   unicode-range: u+0460-052f, u+20b4, u+2de0-2dff, u+a640-a69f; } /* cyrillic */ @font-face {   font-family: 'roboto';   font-style: normal;   font-weight: 300;   src: local('roboto light'), local('roboto-light'), url(http://fonts.gstatic.com/s/roboto/v15/fl4y0qdoxyythegmxx8kcyx0hvgzzqufrduzrpvh3d8.woff2) format('woff2');   unicode-range: u+0400-045f, u+0490-0491, u+04b0-04b1, u+2116; } // ...and more

i thought, when provide url(...) inside css, browser loads resource immediately.

however, when open pen http://codepen.io/anon/pen/egkver , have @ network tab (maybe clear cache) can see loads 2 resources: http://fonts.googleapis.com/css?family=roboto:300 , http://fonts.gstatic.com/s/roboto/v15/hgo13k-tfspn0qi1sfdufzbw1xu1rkptjj_0jans920.woff2 normal latin range (defined @ bottom of loaded font css):

/* latin */ @font-face {   font-family: 'roboto';   font-style: normal;   font-weight: 300;   src: local('roboto light'), local('roboto-light'), url(http://fonts.gstatic.com/s/roboto/v15/hgo13k-tfspn0qi1sfdufzbw1xu1rkptjj_0jans920.woff2) format('woff2');   unicode-range: u+0000-00ff, u+0131, u+0152-0153, u+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2212, u+2215, u+e0ff, u+effd, u+f000; }

so, browser @ characters use, , load used font? or depend on browser settings? can't find resource documents behaviour (or i'm searching wrong keyword). i suspect has unicode-range: @ bottom of css.

  1. the browser reads @import instruction tells him load css page served google: http://fonts.googleapis.com/css?family=roboto:300. page loaded instantly.

  2. in page, there url() instructions tell browser font files located. the browser doesn't download these fonts until needs them. example, if font never used element, browser won't download it.

i suspect has unicode-range: @ bottom of css.

yes, that's it. unicode-range specifies class of characters font include (for example, cyrillic characters). if there aren't characters of rage inside page, fonts won't downloaded.

for reference: https://en.wikipedia.org/wiki/unicode_block


-

Comments

Post a Comment

Popular posts from this blog

delphi - Disable and change color of node in Treeview -

Image
i looking way of disabling proper nodes . let's have created simple treeview structure below: parent 1 (disable) parent 2 child 1 child 2 (disable) so far have found workaround how that, still doesn't work @ all. use onchanging event handler: procedure tform1.treeviewchanging(sender: tobject; node: ttreenode; var allowchange: boolean); begin if (node.text = 'parent 1') or (node.text = 'child 1') allowchange := false; end; it works, because can't click on node, issue after 'disabling' node way, color of parent 1 , child 1 nodes same other. way change color of nodes (grey)? or maybe know way disabling nodes in ttreeview component? to disable node, set enabled property false . disabled item displayed in gray color. to change normal color of nodes text, change ttreeview.font.color . to change color of disabled nodes text, use oncustomdrawitem event: procedure tform2.treeview1customdrawitem(sender: tcu...
Read more

unity3d - Rotate an object to face an opposite direction -

i have object , b. when click on object b, rotates object b (a faces b). b doesn't face a. need following : when faces b, need face opposite direction. have code rotating @ b. how rotate face opposite direction after that? vector3 targetdirection = target - transform.position; float step = speed * time.deltatime; vector3 newdirection = vector3.rotatetowards (turretdome.transform.forward, targetdirection, step, 0.0f); turretdome.transform.rotation = quaternion.lookrotation (newdirection); you object facing object b, want inverse direction of object after that? objecta.transform.rotation = quaternion.inverse(objecta.transform.rotation) but lets assume example turretdome object a, (negate direction): turretdome.transform.rotation = quaternion.lookrotation (-newdirection); naturally, both of these snippets not show how smoothen rotation, seem know how use time.deltatime. just incase unsure, quaternion.lerp this
Read more

elasticsearch python client - work with many nodes - how to work with sniffer -

i have 1 cluster 2 nodes. i trying understand best practise connect nodes, , check failover when there downtime on 1 node. from documentation : es = elasticsearch( ['esnode1', 'esnode2'], # sniff before doing sniff_on_start=true, # refresh nodes after node fails respond sniff_on_connection_fail=true, # , every 60 seconds sniffer_timeout=60 ) so tried connect nodes this: client = elasticsearch([ip1, ip2],sniff_on_start=true, sniffer_timeout=10,sniff_on_connection_fail=true) where ip1/ip2 machine ip's (for example 10.0.0.1, 10.0.0.2) in order test it, terminated ip2 (or put non existent if) now, when trying connect, get: transporterror: transporterror(n/a, 'unable sniff hosts - no viable hosts found.') even ip1 exist , up. if trying connect this: es = elasticsearch([ip1, ip2]) then can see in log if client not getting response ip2, move ip1, , return valid response. so missing here something? thought s...
Read more