font-family

2011.04.15. 19:24 stack

Nemrég játszottam egy kicsit a Google Web Fonts rendszerrel.
Egyszerű és nagyszerű technológia. :)

Sajnos szembesülnöm kellett azzal, hogy a különböző böngészők a font-family értékét JavaScript-ben nem ugyanúgy kezelik. Főleg, ha az adott betűkészlet még nincs is betöltve.

Egy egyszerű CSS szabály:

.mountains {
    font-family: 'Mountains of Christmas',arial,serif;
}

Két lekérés. Az első elem a fenti CSS osztályt kapja meg, a másik elem style-ból kapja meg ugyanazt.

var el1 = Ext.getBody().createChild({
    cls: 'mountains'
});
var el2 = Ext.getBody().createChild({
    style: "font-family: 'Mountains of Christmas',arial,serif;"
});
Ext.getBody().createChild({
    tag: 'pre',
    html: el1.getStyle('font-family') + "\n" +
          el2.getStyle('font-family')
});

Eredmények:

Firefox + IE:

'Mountains of Christmas',arial,serif
'Mountains of Christmas',arial,serif

Chrome + Safari:

'Mountains of Christmas', arial, serif
'Mountains of Christmas', arial, serif

(egy-egy szóköz bekerült)

És végül az Opera:

Arial
"Mountains of Christmas", "arial", serif

Azaz, ha egy be nem töltött betűkészletet szeretnék lekérni, ami nem style-ből, hanem class-ból jön, akkor az bizony az Operának nem sikerül. A style verzió is némileg megváltozott.
Az első verziónál a document.styleSheets –en keresztül elérhető a betűkészlet neve, de azért ez úgy kicsit macerás. :(

Szólj hozzá!

Címkék: css fonts

A bejegyzés trackback címe:

https://extjs.blog.hu/api/trackback/id/tr32828530

Kommentek:

A hozzászólások a vonatkozó jogszabályok  értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai  üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a  Felhasználási feltételekben és az adatvédelmi tájékoztatóban.

Nincsenek hozzászólások.

ExtJS blog, mi ez?

Az ExtJS egy JavaScript keretrendszer, melyet a blog írója elfogultan a legjobbnak tart, és ez a blog olyan apróságok gyűjteménye, melyek ExtJS használata közben felmerültek, eszébe jutottak...

Címkék

ajax (4) alignto (1) állás (3) analytics (1) anchorto (1) android (4) animate (2) array (9) auto (1) back button (1) beautifier (1) beforeevent (1) benchmark (1) blur (1) budapest.js (1) button (1) canvas (1) capture (1) case sensitive (1) center (1) change (1) cikkajánló (1) class (2) closure compiler (1) collapse (1) combobox (3) comment (1) console.log (2) contextmenu (2) core (2) count (1) css (15) csv (1) dataview (1) date (4) datefield (3) datepicker (1) debug (1) doksi (1) dragdrop (1) easing (1) eclipse (1) editor (1) element (5) error (5) eval (2) event (1) fejtörő (1) field (2) fieldset (1) filter (1) firefox (4) firefox extension (2) focus (3) fonts (1) fun (1) function (1) google (2) google chrome (1) grayscale (1) grid (4) group contact (1) header (3) height (2) hidden (1) hirek (2) history (1) htaccess (1) html5 (2) htmleditor (2) https (1) icon (3) id (2) ie (2) ie6 (1) ie9 (1) iframe (3) image (2) indexof (1) javascript (1) jquery (2) jslint (2) jsmin (1) json (7) keymap (1) kipróbálom (2) könyvajánló (2) label (1) layout (1) lint (1) log (1) loop (1) magyar (2) mandelbrot (1) mask (1) math (1) maxlength (1) mistake (1) mysql (5) napi szívás (16) nem extjs (12) node (1) nth child (1) number (1) off (5) offline (1) operator (1) override (20) pagesize (1) paging (2) panel (2) php (7) picker (1) plugin (3) pozicionálás (2) preload (1) print (1) propertygrid (1) pseudo (3) readonly (2) record (1) regexp (1) replace (1) resizable (1) rotate (1) round (1) scale (1) sencha touch (2) server (1) shuffle (1) slider (1) sort (3) sortable (1) store (2) string (7) sum (1) tabchange (1) tabpanel (1) tab key (2) tdd (1) template (1) textarea (2) textfield (1) textitem (1) theme (2) throw (1) timer (1) timestamp (1) title (2) toggle (1) toolbar (6) tools (1) total count (1) transparent (1) tree (1) treenode (1) trigger (1) truncate (1) try (1) ucfirst (1) undefined (2) unique (1) unload (1) urlencode (1) utf8 (2) verzió (1) video (1) viewer (1) viewport (2) visible (2) vtype (1) window (2) xtype (1) zindex (2)

Extjs.blog.hu - RSS

Kérdés?