2014-03-02 4 views
0

Так что я был в этой проблеме очень давно, разместил вопрос, но решил удалить его, так как im уже использует bootstrap .. теперь это происходит, когда я пытаюсь отладить страницы, мои main.css и bootstrap.css загружены, но мои пользовательские шрифты не .. im на потерянный прямо сейчас, почему мой шрифт не будет загружен. Вот пример кода.HTML custom Font on Bootstrap wont work

main .css

@font-face { 
    font-family: 'Arvo'; 
    url("../fonts/custom/Arvo-Regular.woff") format("woff"); 
    font-weight: normal; 
    font-style: normal; 
} 

для boostrap.css - я уже настроить его на своем сидячей е, чтобы мой пользовательский шрифт включен enter image description here

тогда на моей index.html

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Bootstrap 101 Template</title> 

    <!-- Bootstrap --> 
    <link href="css/main.css" rel="stylesheet"> 
    <link href="css/bootstrap.css" rel="stylesheet"> 

    </head> 
    <body> 
    <h1>Hello, world!</h1> 
    </body> 
</html> 

то для моей Chrome Debugger, enter image description here

им в настоящее время на самом деле потеряли, Потому что это не загрузит мой шрифт ... и я не знаю, как, прочитали некоторые потоки, но все они указывают мне на вышеупомянутую модификацию, которая не загрузит мой шрифт

ОБНОВЛЕНИЕ

enter image description here

enter image description here

enter image description here

+0

При каких обстоятельствах, вы думаете, кто-нибудь может действительно прочитать эти снимки экрана? –

+0

ОК извините за это, я обновил свой SS – lemoncodes

ответ

1

Вы уверены, что у вас есть какие-либо материалы, которые на самом деле использует специальный шрифт. Из снимков экрана, похоже, вы используете семейство без засечек в качестве базового семейства шрифтов, а первым шрифтом в этом стеке является Helvetica Neue. Если вы тестируете Mac или другую систему, на которой установлен Helvetica Neue, браузер никогда не попытается загрузить второй шрифт в вашем стеке (это ваш собственный шрифт).

Update:

Ваш синтаксис является неправильным. Вам необходимо установить src:

@font-face { 
    font-family: 'Arvo'; 
    src: url("../fonts/custom/Arvo-Regular.woff") format("woff"); 
    font-weight: normal; 
    font-style: normal; 
} 
+0

ahhh, я вижу, поэтому мне нужно сделать его первым? – lemoncodes

+0

Стек шрифта - это список допустимых шрифтов в порядке приоритета. Если браузер находит Helvetica Neue, ему не нужно проверять какие-либо другие шрифты в стеке. –

+0

ОК, попробовал ур, но я думаю, что он загрузил сан-сериф, последний в стеке, обратитесь к моему обновленному SS – lemoncodes