Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] Brak własnej czcionki
Forum PHP.pl > Forum > Przedszkole
stefik4
22.05.2013, 08:40:21
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 
  1. @font-face {
  2.     font-family: 'scl';
  3.     src: url('img/SwitzerlandCondensedLight.TTF');
  4.     font-weight: normal;
  5.     font-style: normal;
  6. }
[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
22.05.2013, 08:44:50
src: url('img/SwitzerlandCondensedLight.TTF') format('truetype');

A tak?
Hyth
22.05.2013, 08:51:15
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/
stefik4
22.05.2013, 08:56:31
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 
  1. @font-face {
  2. font-family: 'scl';
  3. src: url('img/SwitzerlandCondensedLight.eot');
  4. src: url('img/SwitzerlandCondensedLight.TTF') format('truetype'),
  5. url('img/SwitzerlandCondensedLight.SVG#svgFontName') format('svg');
  6. font-weight: normal;
  7. font-style: normal;
  8. }
[HTML] pobierz, plaintext


Lecz nadal to samo ;/
Hyth
22.05.2013, 09:00:18
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
22.05.2013, 09:08:38
Postanowiłem to trochę uporządkowac i zrobiłem katalog fonts w kalatolu img i mam taki kod:

[HTML] pobierz, plaintext 
  1. @font-face {
  2. font-family: 'scl';
  3. src: url('img/fonts/SwitzerlandCondensedLight.eot');
  4. src: url('img/fonts/SwitzerlandCondensedLight.woff') format('woff'),
  5. url('img/fonts/SwitzerlandCondensedLight.ttf') format('truetype'),
  6. url('img/fonts/SwitzerlandCondensedLight.svg#svgFontName') format('svg');
  7. font-weight: normal;
  8. font-style: normal;
  9. }
[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 smile.gif 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
22.05.2013, 09:15:07
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
22.05.2013, 09:17:32
Tzn pod tym moim całym kodem CSS wkleić to co Ty tutaj podałeś ?
Hyth
22.05.2013, 09:19:43
Zaraz za pierwszą regułą
@font-face {
blablabla
}

<TUTAJ>.
stefik4
22.05.2013, 09:21:04
To miało wygładzić w Operze i Chromie ? Nic się nie zmieniło.
Hyth
22.05.2013, 09:28:11
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
22.05.2013, 09:31:37 
[HTML] pobierz, plaintext 
  1. @font-face {
  2. font-family: 'scl';
  3. src: url('img/fonts/SwitzerlandCondensedLight.eot');
  4. src: url('img/fonts/SwitzerlandCondensedLight.svg#svgFontName') format('svg'),
  5. url('img/fonts/SwitzerlandCondensedLight.woff') format('woff'),
  6. url('img/fonts/SwitzerlandCondensedLight.ttf') format('truetype');
  7. font-weight: normal;
  8. font-style: normal;
  9. }
[HTML] pobierz, plaintext


Nadal tak samo
Hyth
22.05.2013, 09:40:53
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.
stefik4
22.05.2013, 09:55:30
Po wywaleniu woffa całkiem znów sie wszystko psuje przynajmniej u mnie i na Chromie.
StrefaPi
22.05.2013, 10:52:44
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');
    }
}
Hyth
22.05.2013, 11:51:03
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.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.