2016-05-12 3 views
0

Привет! У меня проблемы с использованием webfonts на моей веб-странице: таблица стилей и html-файл находятся в разных папках. Таким образом, весь код css работает, за исключением шрифта; если я перемещу таблицу стилей в папку страницы html, шрифт изменится. Может кто-нибудь объяснить мне, почему это происходит?сменить шрифт на моей странице

HTML-код в не рабочем случае:

<!DOCTYPE html> 

<html lang="it"> 
    <head> 
     <meta charset="utf-8"> 
     <link rel="stylesheet" href="css/style.css"> 
    </head> 

    <body> 
     <h1>example1</h1> 
     <p>example2</p> 
    </body> 
</html> 

HTML код в рабочем случае:

<!DOCTYPE html> 

<html lang="it"> 
    <head> 
     <meta charset="utf-8"> 
     <link rel="stylesheet" href="style.css"> 
    </head> 

    <body> 
     <h1>example1</h1> 
     <p>example2</p> 
    </body> 
</html> 

CSS код (это то же самое в каждом случае):

@font-face { 
    font-family: 'Raleway'; 
    src: url('other/font/Raleway-ExtraLight.eot'); 
    src: url('other/font/Raleway-ExtraLight.woff2') format('woff2'), 
     url('other/font/Raleway-ExtraLight.woff') format('woff'), 
     url('other/font/Raleway-ExtraLight.ttf') format('truetype'), 
     url('other/font/Raleway-ExtraLight.svg#Raleway-ExtraLight') format('svg'), 
     url('other/font/Raleway-ExtraLight.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal; 
    font-style: normal; 
} 

body { 
    font-family: Raleway; 
} 

ответ

2

URL-адреса в CSS относятся к URL-адресу файла CSS, а не к HTML-документу нт.

При перемещении файла CSS вы меняете каталог, из которого рассчитываются other/font/Raleway-ExtraLight.eot и др.

например. вы говорите /other/font/Raleway-ExtraLight.eot вместо/css/other/font/Raleway-ExtraLight.eot`

Возможно, вы хотите явно разместить / в начале URL-адреса.

+0

Спасибо, человек! Когда я написал код, я был немного рассеян, и я не заметил эту глупую ошибку: / – Bananasaurus

0

URL-адреса шрифтов в файле CSS относятся к расположению CSS-файла, а не к HTML-странице. Ваш текущий URL, 'other/font/Raleway-ExtraLight.eot' - это то же самое, что и '[Your CSS folder]/other/font/Raleway-ExtraLight.eot'.

Если ваш CSS и шрифты находятся в разных папках, в этой структуре:

-css 
    -styles.css 
-fonts 
    -Raleway.eot 

тогда гиперссылка на шрифт должен быть '../fonts/Raleway.eot' (.. движется вверх уровень).

Смежные вопросы