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

Question

我想知道是否有人可以帮我弄清楚如何从我的电脑（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）是最有效的方法，尤其是当您想要使用各种字体时。