html - 如何使用文件系统HTML CSS中的字体

我有一个要使用的字体文件，称为Gotham Light Regular。您将如何访问该文件以更改字体？下面是我现在所拥有的，但是它不起作用。

.name{
    font-family: myFirstFont;
}

<style>
        @font-face {
        font-family: myFirstFont;
        src: url(fonts/Gotham Light Regular/Gotham Light Regular.otf);
        }
</style>

<div class= "name">
    <h1>Hello</h1>
    <h2>Bye</h2>
</div>

最佳答案

将字体文件放置在可访问Web的位置，并放置适当的CSS。

您可以从互联网上下载该字体（例如cufonfonts），也可以在计算机上找到您的字体文件（example）。

然后放CSS：

@font-face {
    font-family: 'GothamLight';
    src: url('/fonts/Gotham-Light.eot');
    src: url('/fonts/Gotham-Light.otf') format('opentype'),
         url('/fonts/Gotham-Light.eot?iefix') format('embedded-opentype'),
         url('/fonts/Gotham-Light.woff') format('woff'),
         url('/fonts/Gotham-Light.ttf') format('truetype'),
         url('/fonts/Gotham-Light.svg#gothamlight') format('svg');
}


body {
   font-family: GothamLight;
}