CSS 在 MacOS 上看到字体在 VPS 上看不到字体(Ubuntu 20.04 LTS)

标签 css macos ubuntu fonts vps

问题 :当我下载 Google 字体时,CSS 可以在使用 macOS 时检测字体。 CSS 在 VPS Ubuntu 20.04 LTS 上无法看到使用相同代码的字体。如果我使用 @import 从 Google 获取字体的链接,那么 CSS 可以在两种情况下看到字体(即,在 macOS 和 VPS Ubuntu 上)。我不想使用链接;我想在我的 VPS 硬盘上拥有这些字体。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My HTML Test</title>

    <style>
        /*
        @import url('https://fonts.googleapis.com/css2?family=Updock&display=swap');
        */
        
        @font-face {
            font-family: 'Updock';
            src: url('/Updock/Updock-Regular.ttf');
        }
        
        .myFont {
            font-family: 'Updock';
            
        }

        .defaultFont {
            font-family: cursive;
        }
    
        .myFirstLetter::first-letter {
            font-size: 200%;
            color:red
        }
        
    
    </style>

</head>
<body>
    <div class="myFont">
        <h1>This Is My Font!!</h1>
    </div>

    <div class = "defaultFont, myFirstLetter">
        

        <h1>This Is Default Font!</h1>
    </div>
    
   
</body>
</html>
字体文件的目录路径正确。我在 VPS 上使用了相同的目录名和路径,在 macOS 上是成功的。

最佳答案

试着把它放在你的 VPS 机器上,在 .htaccess 文件中:

<IfModule mod_mime.c>
    AddType application/x-font-ttf       .ttf
</IfModule>
确保您已安装 mod_mime 模块。
另外,检查这个答案:
Correct Apache AddType directives for font MIME types

关于CSS 在 MacOS 上看到字体在 VPS 上看不到字体(Ubuntu 20.04 LTS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71904150/

相关文章:

mysql - phpMyAdmin 在 Ubuntu 14.04 上没有关系

linux - 使用 Rstudio-server 验证 Windows 域用户

html - 使用 CSS 改变复选框元素的内容

html - 如何在 CSS 和 HTML 中打断长单词

javascript - 有没有办法让 IFRAME 的内容溢出到父框架上?

macos - 在 RubyMine for OS X 中切换列选择模式的快捷方式是什么?

bash - 命令行批量重命名

html - 具有CSS背景类的多个背景

objective-c - 获取 NSButton 上的悬停事件以显示图像

ios - 带有 GLSL 数组的 SceneKit 着色器修改器