为什么我导入外部字体的 STYLE 不起作用

Question

为什么以下 <style> 没有将我的字体更改为 "Computer Modern Typewriter"？

URL有效

<style type="text/css">
    @font-face {
        font-family: 'Computer Modern Typewriter';
        src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmuntt.otf');
        font-weight: normal;
        font-style: normal;
    }

    body {
        font-size: 1em;
        font-family: 'Computer Modern Typewriter'
    }
</style>

Answer 1

你可以使用这个css

        @font-face {
            font-family: "Computer Modern";
            src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunss.otf');
        }        
        @font-face {
            font-family: "Computer Modern";
            src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunsx.otf');
            font-weight: bold;
        }        
        @font-face {
            font-family: "Computer Modern";
            src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunsi.otf');
            font-style: italic, oblique;
        }        
        @font-face {
            font-family: "Computer Modern";
            src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunbxo.otf');
            font-weight: bold;
            font-style: italic, oblique;
        }        
        body {
            font-family: "Computer Modern", sans-serif;
        }

Answer 2

可能是因为这是 OTF 字体。

您应该获取或创建其他字体格式 - 您主要需要网站的 WOFF 格式。

如果字体允许（版权方面），您可以在此处创建：https://www.fontsquirrel.com/tools/webfont-generator

Answer 3

仅仅.otf是不够的。您还必须添加其他格式。检查 here. For you ease just click check fontface and necessary formats will be made available. Also, check here 如何为 font-face 添加多个 src。

Answer 4

我认为这不是 OTF 问题，而是 URL http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmuntt.otf 虽然它是可访问的，但它不是 HTTPS，并且浏览器不会加载它。我将副本保存到 GitHub，然后应用相同的样式（将 URL 替换为新的 https url）。成功了！

Answer 5

Link 您提供的不支持 HTTPS，因此如果您的站点有 HTTPS 连接并且 headers 限制访问不安全的 HTTP，则可能是问题所在。

另外，OpenType现在不太适合web，你可以使用相同字体的WOFF或WOFF2版本。我在这里找到了一个：https://github.com/dreampulse/computer-modern-web-font。像这样使用它：

@font-face {
 font-family: 'Computer Modern Typewriter';
 src: url('cmuntt.eot');
 src: url('cmuntt.eot?#iefix') format('embedded-opentype'),
   url('cmuntt.woff') format('woff'),
   url('cmuntt.ttf') format('truetype'),
   url('cmuntt.svg#cmuntt') format('svg');
 font-weight: normal;
 font-style: normal;
}

@font-face {
 font-family: 'Computer Modern Typewriter';
 src: url('cmuntb.eot');
 src: url('cmuntb.eot?#iefix') format('embedded-opentype'),
   url('cmuntb.woff') format('woff'),
   url('cmuntb.ttf') format('truetype'),
   url('cmuntb.svg#cmuntb') format('svg');
 font-weight: bold;
 font-style: normal;
}

@font-face {
 font-family: 'Computer Modern Typewriter';
 src: url('cmunit.eot');
 src: url('cmunit.eot?#iefix') format('embedded-opentype'),
   url('cmunit.woff') format('woff'),
   url('cmunit.ttf') format('truetype'),
   url('cmunit.svg#cmunit') format('svg');
 font-weight: normal;
 font-style: italic;
}

@font-face {
 font-family: 'Computer Modern Typewriter';
 src: url('cmuntx.eot');
 src: url('cmuntx.eot?#iefix') format('embedded-opentype'),
   url('cmuntx.woff') format('woff'),
   url('cmuntx.ttf') format('truetype'),
   url('cmuntx.svg#cmuntx') format('svg');
 font-weight: bold;
 font-style: italic;
}

为什么我导入外部字体的 STYLE 不起作用

Why my STYLE to import external font-face doesn't work

html

css

font-face

webfonts