Question

嗨:)我在网页中使用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;
}

Answer 1

CSS中的网址与 CSS 文件的网址相关，而不是HTML文档。

移动CSS文件时，可以更改other/font/Raleway-ExtraLight.eot等计算的目录。

e.g。你说/other/font/Raleway-ExtraLight.eot而不是/ css / other / font / Raleway-ExtraLight.eot`

您可能希望明确地将/放在网址的前面。

Answer 2

CSS文件中的字体URL相对于CSS文件的位置而不是HTML页面。您当前的网址'other/font/Raleway-ExtraLight.eot'与'[Your CSS folder]/other/font/Raleway-ExtraLight.eot'相同。

如果您的CSS和字体位于不同的文件夹中，请使用以下结构：

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

然后字体的网址应为'../fonts/Raleway.eot'（..向上移动一级）。

更改我的网页上的字体

2 个答案: