Question

以下<style>为什么不将我的字体更改为“计算机现代打字机”？

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。为了您的方便，只需单击选中字体，将提供必要的格式。另外，请检查here如何为src添加多个font-face。

Answer 4

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

Answer 5

您提供的链接不支持HTTPS，因此，如果您的站点具有HTTPS连接和标头，这些标头限制了对不安全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;
}

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

5 个答案: