@ twarz-czcionki nie działa

Question

Nie wiem dlaczego, ale czcionka się nie wyświetla. Pomoc.

CSS (w folderze css): style.css:

@font-face { 
font-family: Gotham; 
src: url(../fonts/gothammedium.eot); 
src: local('Gotham-Medium'), 
url(../fonts/Gotham-Medium.ttf) format('truetype'); 
} 

a { 
font-family:Gotham,Verdana,Arial; 
} 

Answer 1

Podwójny okres (..) oznacza przejście do jednego folderu, a następnie poszukiwanie folderu za ukośnikiem. Na przykład:

Jeśli index.html w folderze html/files i czcionki są w html/fonts The .. jest w porządku (bo trzeba cofnąć się o jeden folder, aby przejść do /fonts). Czy twój index.html w html i twoje czcionki w html/fonts, wtedy powinieneś użyć tylko jeden okres.

Innym problemem może być brak obsługi plików .eot w przeglądarce.

Nie widząc więcej kodu (a może linku do wersji na żywo Twojej strony), nie mogę ci naprawdę pomóc.

Edytuj: Zapomnij o części .eot, przegapiłem plik .ttf w twoim css.

Spróbuj wykonać następujące czynności:

@font-face { 
font-family: Gotham; 
src: url(../fonts/gothammedium.eot); 
src: url(../fonts/Gotham-Medium.ttf); 
} 

Answer 2

Nie wiem dokładnie, jaki jest twój problem, ale spróbuj wykonać następujące czynności:

1. Czy istnieją pliki czcionek?
2. Czy potrzebujesz wycen na temat adresów URL?
3. Czy używasz CSS3-enabled browser?

Check here na przykładach, jeśli nie będą pracować dla Ciebie to masz inny problem

Edit:

Masz kilka powtarzanych deklaracji w źródle, to działa?

@font-face { font-family: Gotham; src: url('../fonts/gothammedium.eot'); } 

a { font-family:Gotham,Verdana,Arial; } 

Answer 3

Korzystanie font-face wymaga trochę zrozumienia niezgodności przeglądarki i może wymagać pewnych zmian na samym serwerze WWW. Pierwszą rzeczą, którą musisz zrobić, to sprawdzić konsolę, aby zobaczyć, czy/jakie komunikaty są generowane. Czy jest to problem uprawnień lub nie znaleziono zasobu ....?

Po drugie, ponieważ każda przeglądarka spodziewa się innego rodzaju czcionki, użyłabym czcionki wiewiórki do przesłania czcionki, a następnie wygenerowania dodatkowych plików i potrzebnego CSS. http://www.fontsquirrel.com/fontface/generator

Na koniec wersje FireFox i IE nie zezwalają na ładowanie czcionek między domenami. Może zajść potrzeba zmodyfikowania konfiguracji Apache lub .htaccess (zestaw nagłówków Access-Control-Allow-Origin "*")

Answer 4

Miałem ostatnio ten problem i problem polegał na tym, że mój serwer nie był skonfigurowany do obsługi plików woff. W przypadku IIS 7 możesz wybrać swoją witrynę, a następnie wybrać ikonę Typy MIME. Jeśli pliku .woff nie ma na liście, musisz go dodać.Prawidłowe wartości to:

File name extension: .woff 
MIME type: application/font-woff 

Answer 5

Miałem ten sam problem i myślałem, że podzielę się moim rozwiązaniem, ponieważ nie widziałem, aby ktokolwiek rozwiązał ten problem.

Problem polegał na tym, że nie używałem poprawnej ścieżki. Moje CSS wyglądał następująco:

@font-face { 
font-family: 'sonhoregular'; 
src: url('fonts/vtkssonho-webfont.eot'); 
src: url('fonts/vtkssonho-webfont.eot?') format('embedded-opentype'), 
    url('fonts/vtkssonho-webfont.woff2') format('woff2'), 
    url('fonts/vtkssonho-webfont.woff') format('woff'), 
    url('fonts/vtkssonho-webfont.ttf') format('truetype'), 
    url('fonts/vtkssonho-webfont.svg#vtks_sonhoregular') format('svg'); 
font-weight: normal; 
font-style: normal; 

Problem ze ścieżką jest to, że mam na myśli czcionki z mojego pliku CSS, który jest w moim folderze CSS. Potrzebowałem najpierw przejść do poziomu, a następnie do folderu czcionek. To właśnie teraz wygląda i działa świetnie.

@font-face { 
font-family: 'sonhoregular'; 
src: url('../fonts/vtkssonho-webfont.eot'); 
src: url('../fonts/vtkssonho-webfont.eot?') format('embedded-opentype'), 
    url('../fonts/vtkssonho-webfont.woff2') format('woff2'), 
    url('../fonts/vtkssonho-webfont.woff') format('woff'), 
    url('../fonts/vtkssonho-webfont.ttf') format('truetype'), 
    url('../fonts/vtkssonho-webfont.svg#vtks_sonhoregular') format('svg'); 
font-weight: normal; 
font-style: normal; 

Mam nadzieję, że to pomoże komuś!

Answer 6

Używając operatora .. utworzyłeś ścieżkę folderu i otrzymasz coś takiego: /wp-content/themes/wp-content/themes/twentysixteen/fonts/.

Użyj konsoli w przeglądarce, aby zobaczyć ten błąd.

Answer 7

Mam również do czynienia z tego typu problemem. Po wypróbowaniu wszystkich rozwiązań otrzymałem ostateczne rozwiązanie tego problemu. Przyczynami tego typu problemów są określone globalne czcionki. Użyj ! Important kluczowe dla każdej linii w @ font-face jest rozwiązaniem tego problemu.

Pełny opis i przykład na rozwiązanie tego problemu jest tutaj: - http://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html

Answer 8

spróbować umieścić poniżej html w głowie tag.It pracował dla mnie.

<title>ABC</title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 

Answer 9

ja rozwijał dla arabskiej klienta, a miałem problem jak ten, jak również, po użyciu generator czcionki do tworzenia moich czcionek. Żadna z czcionek, które generowałem, nie działała.

Okazuje się, że w "Opcjach zaawansowanych" genratora było ustawienie, które musiałem wybrać, aby użyć nie tylko glifów języka zachodniego (wstępnie wybrana opcja).

Po usunięciu tego podzestawu moje czcionki pracowały ze znakami arabskimi. Mam nadzieję, że może to pomóc komuś innemu na tym stanowisku.

Cheers

Answer 10

Trzeba umieścić plik czcionki/ścieżki w cudzysłów.
Np.

url("../fonts/Gotham-Medium.ttf") 

lub

url('../fonts/Gotham-Medium.ttf') 

i nie

url(../fonts/Gotham-Medium.ttf) 

także @FONT-FACE działa tylko z niektórych plików czcionek.: O (

wszystkich miejsc, gdzie można pobrać czcionki, nigdy nie mów, które pracują czcionek, a które nie