[HTML][CSS] Brak własnej czcionki Opcje

[stefik4]

Witam na swojej stronie chciałem wrzucić niestandardową czcionkę. Wrzuciłem ją na serwer w odpowiedni katalo, a w kodzie umieściłem cos takiego:

[HTML] pobierz, plaintext 
@font-face {
    font-family: 'scl';
    src: url('img/SwitzerlandCondensedLight.TTF');
    font-weight: normal;
    font-style: normal;
}
[HTML] pobierz, plaintext 

Czcionka wyświetlona jest tylko w Mozilli FF:


Zaś np w chromie dzieje się takie cos:


W miejsce tej czcionki wskakuje standardowa. Jest na to jakaś rada?

[Damonsson]

src: url('img/SwitzerlandCondensedLight.TTF') format('truetype');

A tak?

[Hyth]

A dlaczego dodajesz font-face tylko w formacie .ttf? A co z resztą?

Tutaj masz link jak tego używać:

http://css-tricks.com/snippets/css/using-font-face/

Ten post edytował Hyth 22.05.2013, 08:52:06

[stefik4]

Przeczytałem właśnie to an stronie: http://www.webnote.pl/font-face-wlasna-czc...ternetowej.html

I zastosowłem tak:

[HTML] pobierz, plaintext 
@font-face {
font-family: 'scl';
src: url('img/SwitzerlandCondensedLight.eot');
src: url('img/SwitzerlandCondensedLight.TTF') format('truetype'),
url('img/SwitzerlandCondensedLight.SVG#svgFontName') format('svg');
font-weight: normal;
font-style: normal;
}
[HTML] pobierz, plaintext 

Lecz nadal to samo ;/

[Hyth]

A jesteś pewien, że ścieżka do czcionki jest prawidłowa? Pokombinuj z tym, bo może tu być błąd. Ewentualnie podrzuć link do strony.

[stefik4]

Postanowiłem to trochę uporządkowac i zrobiłem katalog fonts w kalatolu img i mam taki kod:

[HTML] pobierz, plaintext 
@font-face {
font-family: 'scl';
src: url('img/fonts/SwitzerlandCondensedLight.eot');
src: url('img/fonts/SwitzerlandCondensedLight.woff') format('woff'),
url('img/fonts/SwitzerlandCondensedLight.ttf') format('truetype'),
url('img/fonts/SwitzerlandCondensedLight.svg#svgFontName') format('svg');
font-weight: normal;
font-style: normal;
}
[HTML] pobierz, plaintext 

A tutaj zrzut tego katalogu:


PS. Dodałem jeszcze format woof bo było tam też takie coś wymienione. I po dodaniu tego woof się naprawiło Tylko czcionka tam jest jakby mniej wygładzona:



Ale na to już chyba nie ma rady, bo każda przeglądarka pewnie inaczej interpretuje

[Hyth]

A spróbuj dodać to na koniec i powiedz czy pomogło.


@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'scl';
url('img/fonts/SwitzerlandCondensedLight.svg#svgFontName') format('svg');
}
}

[stefik4]

Tzn pod tym moim całym kodem CSS wkleić to co Ty tutaj podałeś ?

[Hyth]

Zaraz za pierwszą regułą
@font-face {
blablabla
}

<TUTAJ>.

[stefik4]

To miało wygładzić w Operze i Chromie ? Nic się nie zmieniło.

[Hyth]

Ok jest jeszcze opcja taka.

Wywal to co podałem Ci ostatnio.

a to: url('img/fonts/SwitzerlandCondensedLight.svg#svgFontName') format('svg');

wstaw przed:

url('img/fonts/SwitzerlandCondensedLight.woff') format('woff')

Wtedy Chrome powinien pobierać właśnie 'svg', która jest specjalnie dla niego przygotowana.

[stefik4]

[HTML] pobierz, plaintext 
@font-face {
font-family: 'scl';
src: url('img/fonts/SwitzerlandCondensedLight.eot');
src: url('img/fonts/SwitzerlandCondensedLight.svg#svgFontName') format('svg'),
url('img/fonts/SwitzerlandCondensedLight.woff') format('woff'),
url('img/fonts/SwitzerlandCondensedLight.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
[HTML] pobierz, plaintext 

Nadal tak samo

[Hyth]

Ok, dopiero teraz zauważyłem.

src: url('img/fonts/SwitzerlandCondensedLight.svg#svgFontName') format('svg'),


Przecież "svgFontName" - to musi być nazwa fonta. Zmień to, bo teraz "svg" jakby nie istnieje wcale bo jest źle wywołane.

Edit:

Ewentualnie usuń tę część po .svg
Czyli zostaw tylko:

src: url('img/fonts/SwitzerlandCondensedLight.svg') format('svg'),

Edit2:

Coś mi się z tym woff nie podoba. Po wywaleniu tego formatu, strona wygląda dobrze.

Ten post edytował Hyth 22.05.2013, 09:52:26

[stefik4]

Po wywaleniu woffa całkiem znów sie wszystko psuje przynajmniej u mnie i na Chromie.

[StrefaPi]

chrome (i tylko chrome pod windows inne przeglądarki na webkit już nie) jako jedna z nielicznych przeglądarek źle renderuje niektóre fonty css bo nie wykorzystuje standardowego renderera fontu z systemu tylko własny... w którym nie ma standardowo włączonego antyaliasingu...

na ten problem nie ma skutecznego rozwiązania, font zawsze będzie postrzępiony...

czasem podawane jest rozwiązanie na zasadzie, ale osobiście na Chromie pod Windows nie widze różnicy dużej:

Kod

@font-face {
    font-family: 'chunk-webfont';
    src: url('../../includes/fonts/chunk-webfont.eot');
    src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
    url('../../includes/fonts/chunk-webfont.woff') format('woff'),
    url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
    url('../../includes/fonts/chunk-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'chunk-webfont';
        src: url('../../includes/fonts/chunk-webfont.svg') format('svg');
    }
}

Ten post edytował StrefaPi 22.05.2013, 11:04:19

[Hyth]

Ok, w tym wypadku pomogła zmiana koloru czcionki z #fff na #eee.
Różnica dalej jest, ale już nie rzuca się tak w oczy.