Question

所以，我的问题是这些自定义字体在我将它们添加到单独的.css文件时不起作用并包含它们：

StackOverflowException

字体不显示。 CSS文件以这种方式指向字体：

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

所以我尝试将整个css复制到html文件中，如下所示：

@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');}

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

<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>

它有效，但由于方式包括作品，在外部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

网址不是：

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

CSS文件中的相对URL与文件的位置有关。

位于url('fonts/JosefinSansThin.eot')的CSS文件中的

http://lib.mywebsite.eu/content/content.css等同于http://lib.mywebsite.eu/content/fonts/JosefinSansThin.eot

更新：如果最糟糕的情况发生，请使用绝对路径。

如果字体源为http：// xxx，则CSS @ font-face自定义字体不起作用

2 个答案: