Autor Zpráva
marvaysCZ
Profil
Chtěl bych se proto zeptat, co vše může správné zobrazení @font-face narušit?

Můj postup:
Na ceskefonty.cz si najdu pěkný český font. Protáhnu ho webem fontsquirrel.com, který mi z toho udělá balíček. (možná že už tady při převádění něco zakliknu špatně, nebo navíc). Vygenerovany balíček stáhnu. Zápis do css vložím do css čablony. Jen tam upravím cestu pro fonty, abych je mohl schovat do složky /fonty. A nakonec jedním zápisem určím, kde se daný font má použít. Hotovo.
Kupodivu, tohle to mi málo kdy funguje. Na netu jsem našel spousty různých zápisů. Všechny vyzkouším a nakonec se doberu po pár hodinách nějakého výsledku, ale pro velké množství kombinací pak ani nevím, proč mi zrovna tenhle ten zápis nakonec funguje. Pak dělám další web, automaticky použiju fungující zápis z předešlého a zase to nejede :)

Příklad z rozdělaného webu: (prozatím zápis funguje jen na Chrome)
zápis vygenerovany z fontsquirrel.com a upravena cesta k fontům:
@font-face {
    font-family: 'osifontMedium';
    src: url('/fonty/osifont-2011-12-09-webfont.eot');
    src: url('/fonty/osifont-2011-12-09-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonty/osifont-2011-12-09-webfont.woff') format('woff'),
         url('/fonty/osifont-2011-12-09-webfont.ttf') format('truetype'),
         url('/fonty/osifont-2011-12-09-webfont.svg#osifontMedium') format('svg');
    font-weight: normal;
    font-style: normal;

}

A můj zápis do šablony, kterým chci docílit toho, aby se font použil na určených místech:
.postcontent h1, .postcontent h1 a, .postcontent h1 a:link, .postcontent h1 a:visited, .postcontent h1 a:hover, .postcontent h2, .postcontent h2 a, .postcontent h2 a:link, .postcontent h2 a:visited, .postcontent h2 a:hover, .postcontent h3, .postcontent h3 a, .postcontent h3 a:link, .postcontent h3 a:visited, .postcontent h3 a:hover, h1, h2, h3, .blockheader, .blockheader .t, .hmenu a, .hmenu a:link, .hmenu a:visited, .hmenu a:hover, span.button-wrapper > a.button, span.button-wrapper > a.button:link, span.button-wrapper > input.button, span.button-wrapper > button.button, input {
font-family: osifontMedium;
}

jedná se o web: http://baran.marvays.cz/new

budu rád za jakoukoli informaci, proč mi to funguje jen v Chrome a hlavně co vše může správné fungování narušit :(

PS: jedná se o Joomla 2.5 - kostra šablony je v Artisteeru a zbytek doupraveno ručně.
Nox
Profil
U mě to funguje zase jen na IE9 :) Opera a Chrome nic

No mě funguje toto všude:

@font-face {
    font-family: "FiveMinutes";
    src: url('../fonts/FiveMinutes.eot');
    src: local('☺'),
        url('../fonts/FiveMinutes.otf') format("opentype"),
        url('../fonts/FiveMinutes.ttf') format("truetype"),
        url('../fonts/FiveMinutes.woff') format("woff"),
        url('../fonts/FiveMinutes.svg') format("svg");
}
zdroj: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/ (možná jsem upravil, nevim)
marvayscz
Profil *
zkusil jsem ze zoufalství zadat adresu fontu natvrdo.
Takže místo: '/fonty/osifont-2011-12-09-webfont.woff' jsem zadal: 'http://baran.marvays.cz/new/fonty/osifont-2011-12-09-webfont.woff'

Takže možná tady bude ten největší problém. S touto adresou mi funguje font ve všech prohlížečích.
Ugo
Profil
problém je, že v původní adrese jsi neměl /new/fonty ale jen /fonty
marvayscz
Profil *
Ugo:
jenže mi ten web jel celý ve složce /new tak proto sem ji tma nedával.

Každopádně jsem to udělal jinak. dal sem fonty na moje ftp a do css stránek jsem zadal jejich přesnou adresu. Problém je že to funguje jen v chrome, opeře a starších verzích IE. Zápisy mám z onoho font webu a změnil jsem jen linky na fonty.
marvayscz
Profil *
takže zatím mi 100% funguje jen tento zápis:
@font-face {
    font-family: 'osifontMedium';

    src: url('http://data.marvays.cz/fonty/osifont/osifont-webfont.eot');
    src: url('http://data.marvays.cz/fonty/osifont/osifont-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://data.marvays.cz/fonty/osifont/osifont-webfont.woff') format('woff'),
         url('http://data.marvays.cz/fonty/osifont/osifont-webfont.ttf') format('truetype'),
         url('http://data.marvays.cz/fonty/osifont/osifont-webfont.svgz#osifontMedium') format('svg'),
         url('http://data.marvays.cz/fonty/osifont/osifont-webfont.svg#osifontMedium') format('svg');

    src: url('osifont-webfont.eot');
    src: url('osifont-webfont.eot?#iefix') format('embedded-opentype'),
         url('osifont-webfont.woff') format('woff'),
         url('osifont-webfont.ttf') format('truetype'),
         url('osifont-webfont.svgz#osifontMedium') format('svg'),
         url('osifont-webfont.svg#osifontMedium') format('svg');

    font-weight: normal;
    font-style: normal;
}

kdy soubory fontů nahraju jednak do složky na mém ftp a podruhé přímo do stejné složky, kde je umístěn css soubor se zápisem.

Vysvětluju si to tak, že při načítání umístění písma to chrome a opera v klidečku přelouskají a ví, kam se podívat, kdežto ie a ff umí jen tu druhou část. Zkoušel jsem to totiž prohodit a zapsal nejdřív fonty ve složce a až potom na mém ftp a zmíněný ie a ff to nezobrazily :(

Ale proč, to mi hlava nebere
Fisir
Profil
Reaguji na marvayscza [#1]:
Já osobně používám toto:
/* Definice pisem */
/* Internet Explorer */
@font-face {
font-family: Powers;
font-style: normal;
font-weight: normal;
src: url('/etc/fonts/powers.eot');
}
/* Internet Explorer KONEC */

/* Ostatní */
@font-face {
font-family: Powers;
font-style: normal;
font-weight: normal;
src: url('/etc/fonts/powers.ttf');
}
/* Ostatní KONEC */
/* Definice pisem KONEC */
Funguje to v IE, Chrome, Firefoxu a v Opeře Mobile (takže nejspíš i v normální). Zápis s *.eot je pro Internet Explorer, ostatní prohlížeče si vemou *.ttf.
marvayscz
Profil *
napadá mě, jestli třeba nedělám špatně tu cestu . . . .
src: url('/etc/fonts/powers.ttf'); předpokládám že toto umístění přečte jako http://domena.cz/etc/fonts/powers.ttf ?! byť se soubor css se zápisem umístěn kdekoli na ftp?
Fisir
Profil
Reaguji na marvayscza [#8]:
Ano, předpokládáš správně. Ono totiž to lomítko na začátku znamená root. Je to to samé jako kdyby jsi zadal domena.cz/. Takže byť je CSS umístěno bůhvíkde, bere se to pořád od začátku stromové struktury.
marvayscz
Profil *
Fisir:
Tak jsem to včera vyzkoušel, bohužel v opeře to nefunguje. Sám tomu ale dost dobře nerozumím. Najednou mi v opeře nefunguje ani zápis, který mi fungoval na předešlém webu. Ta opera je nějaká zpropadená.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: