如何在 CSS 中添加自定义字体？

Question

我想知道是否有人可以帮我弄清楚如何从我的 PC (WIN 10) 添加本地字体到我的本地 HTML 网站。这是我到目前为止尝试过的方法。

@font-face {
    font-family: bubble;
    src: local(fonts/bubble.otf);
}

我想从我的网站文件夹中名为 "fonts" 的文件夹中获取字体，然后选择 bubble.otf，但它不起作用

body {
    margin:0;
    font-family: bubble;
}

Answer 1

如果字体在您的网站文件夹中，您应该认为它不是本地字体。它不是本地安装的字体，而是您网站的一部分，即使该网站在您的计算机上也是如此。

所以我认为你误解了 local 的意思，你应该加载字体，就好像它是一个普通的网络字体一样，使用 url 而不是 local。

Answer 2

如果你想从你的本地目录调用你的字体，你必须使用 "url" 而不是你使用的本地来调用它。以下是您想要实现的目标的可行示例。

@font-face {
font-family: Segoel;
src: url('../font/segoel.eot'); /* IE9 Compatibility Modes */
src: url('../font/segoel.eot?') format('eot'),  /* IE6-IE8 */
url('../font/segoel.woff') format('woff'), /* Modern Browsers */
url('../font/segoel.ttf')  format('truetype'), /* Safari, Android, iOS */
url('../font/segoel.svg#svgsegoel') format('svg'); /* Legacy iOS */  }

但是，直接链接到 Google font, fontsquirrel 等在线字体存储库是最有效的方法，尤其是当您想使用各种字体时。

如何在 CSS 中添加自定义字体？

How to add a custom font in CSS?

css

webfonts