如果字體源為http：// xxx，則CSS @ font-face自定義字體不起作用

Question

所以，我的問題是，當我將它們添加到單獨的.css文件並包含它們時，這些自定義字體不起作用：

<link rel="stylesheet" href="http://lib.mywebsite.eu/content/content.css">

字體只是不顯示。 CSS文件以這種方式指向字體：

@font-face {
font-family: 'JosefinSansThin';
src: url('fonts/JosefinSansThin.eot');
src: url('fonts/JosefinSansThin.eot') format('embedded-opentype'),
    url('fonts/JosefinSansThin.woff2') format('woff2'),
    url('fonts/JosefinSansThin.woff') format('woff'),
    url('fonts/JosefinSansThin.ttf') format('truetype'),
    url('fonts/JosefinSansThin.svg#JosefinSansThin') format('svg');}

所以我試圖將整個CSS復制到html文件中，如下所示：

<style type='text/css'>
    @font-face {
font-family: 'JosefinSansThin';
src: url('/subdom/lib/content/fonts/JosefinSansThin.eot');
src: url('/subdom/lib/content/fonts/JosefinSansThin.eot') format('embedded-opentype'),
    url('/subdom/lib/content/fonts/JosefinSansThin.woff2') format('woff2'),
    url('/subdom/lib/content/fonts/JosefinSansThin.woff') format('woff'),
    url('/subdom/lib/content/fonts/JosefinSansThin.ttf') format('truetype'),
    url('/subdom/lib/content/fonts/JosefinSansThin.svg#JosefinSansThin') format('svg');}</style>

繁榮！ 有效。 但我不想只在index.php中使用它，我需要它在其他html / php文件中 - >它需要在外部文件中。 所以我的下一次嘗試是用php包含它：

<style type='text/css'>
    <?php
        include $_SERVER['DOCUMENT_ROOT'].'/subdom/lib/content/content.css';
    ?>
</style>

它工作，但由於方式包括作品，在外部CSS中必須有相同的字體路徑，就像它在index.php - '/ subdom / lib / content / fonts ...'中一樣我不能在除root之外的其他文件夾中使用它。 如果我能用地址http://lib.mywebsite.eu/content/fonts/JosefineSansThin.xxx （它等於http://mywebsite.eu/subdom/lib/content/fonts）指向它，那一切都會好的/JosefineSansThin.xxx ）知道為什么它不起作用？ 謝謝！

Answer 1

您需要在CSS文件本身中使鏈接絕對：

@font-face {
font-family: 'JosefinSansThin';
src: url('/subdom/lib/content/fonts/JosefinSansThin.eot');
src: url('/subdom/lib/content/fonts/JosefinSansThin.eot') format('embedded-opentype'),
    url('/subdom/lib/content/fonts/JosefinSansThin.woff2') format('woff2'),
    url('/subdom/lib/content/fonts/JosefinSansThin.woff') format('woff'),
    url('/subdom/lib/content/fonts/JosefinSansThin.ttf') format('truetype'),
    url('/subdom/lib/content/fonts/JosefinSansThin.svg#JosefinSansThin') format('svg');

使鏈接絕對將允許它們工作， 無論您在哪個文件夾。

希望這可以幫助！

Answer 2

不是URL假設是：

<link rel="stylesheet" href="http://lib.mywebsite.eu/subdom/lib/content/content.css"> ？

CSS文件中的相對URL與文件的位置有關。

位於http://lib.mywebsite.eu/content/content.css的CSS文件中的url('fonts/JosefinSansThin.eot')等同於http://lib.mywebsite.eu/content/fonts/JosefinSansThin.eot

更新：如果最壞的情況發生，請使用絕對路徑。