如何使字体 CSS 在自定义元素中工作

Question

我们正在尝试使用自定义字体制作自定义元素应用程序。我们正在使用 @font-face 属性，但当我们检查时，会显示默认字体 Times New Roman。

这是具有样式的代码部分：

const template = document.createElement('template');

template.innerHTML = `
    <style>
            @font-face {
                font-family: "Roboto";
                src:
                local("Roboto"),
                url("https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxK.woff2") format("woff2");
            }
        *{
            background-color: #658EA9;
            padding: 10px;
        }
        #startBtn:not(:last-child), #stopBtn:not(:last-child), #downloadBtn:not(:last-child) {
            margin-bottom: 5px;
        }
        #startBtn, #stopBtn, #downloadBtn {
            margin-top: 10px;
            width: 160px;
            height: 45px;
            cursor: pointer;
            font-family: Roboto;

        }
        #startBtn:hover, #stopBtn:hover, #downloadBtn:hover{
            background-color: #647C90;
            color: red;
        }
        #status {
            font-size: 20px;
        }
        #audioInputSelect {
            width: 160px;
            height: 45px;
            cursor: pointer;
            font-weight: bold;
        }
        div {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
    </style>  
    <div>
        <select id="audioInputSelect"></select>
        <button id="startBtn">START</button>
        <button id="stopBtn">STOP</button>
        <button id="downloadBtn">SAVE</button>
        <p id="status">Not recording</p>
    </div>
`;

我们尝试将 @font-face 代码移动到代码的不同部分，并在按钮 CSS 中的名称周围添加引号。我们期望字体加载到按钮标签和其他文本上。

Answer 1

您似乎正在尝试在自定义元素应用程序中使用自定义字体。确保您在 CSS 中正确定义和应用字体。在您的情况下，您已经正确定义了

@font-face

规则。

以下是一些需要检查的事项：

1. 字体加载：确认字体文件（

   https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxK.woff2

   ）可访问并正确加载。您可以在浏览器的网络选项卡中检查这一点。

2. 跨源资源共享（CORS）：如果字体文件托管在不同的域上，请确保它允许跨源请求。如果没有，您可能需要将字体文件托管在与应用程序相同的域上，或者确保服务器包含适当的 CORS 标头。

3. 字体系列应用：确保

   font-family

   属性正确应用于元素。就您而言，您似乎正在将其应用于

   #startBtn

   、

   #stopBtn

   和

   #downloadBtn

   。

#startBtn, #stopBtn, #downloadBtn {
    margin-top: 10px;
    width: 160px;
    height: 45px;
    cursor: pointer;
    font-family: "Roboto"; /* Make sure to use quotes around font family name */
}

此外，请确保不存在可能会覆盖您的自定义字体设置的冲突样式。

如果您检查了所有这些要点后问题仍然存在，则可能存在其他问题。您可以使用浏览器开发人员工具来检查应用的样式，并查看是否有任何错误或覆盖影响您的字体。