html - 在 CSS 中应用 font-face 的正确方法是什么？

Question

目前，我正在按照以下示例进行操作，对吗？有更好的方法吗？

/*Font Face*/
@font-face { font-family: Comfortaa; src: url('Comfortaa.ttf') }
@font-face { font-family: Comfortaa; font-weight: bold; src: url('ComfortaaBOLD.ttf') }

/*Fonts*/h1, h2, h3, h4, h5, h6, p, pre, a, ol, li, span, label, blockquote, figcaption, abbr, td, input, textarea {
    font-family: 'Comfortaa', arial, sans-serif; 
    font-size: 1em;
    line-height: 150%;
    color: #4A4A4A;
}

---

2) 以下哪种方法应用 BOLD 字体是正确的：

一个）

strong {
   font-weight: bold;
}

二）

strong {
   font-family: Comfortaa; font-weight: bold; src: url('ComfortaaBOLD.ttf')
}

Answer 1

通常你会这样做：

@font-face { font-family: Comfortaa; font-weight: normal; src: url('Comfortaa.ttf') }
@font-face { font-family: ComfortaaBold; font-weight: normal; src: url('ComfortaaBOLD.ttf') }

/*Fonts*/h1, h2, h3, h4, h5, h6, p, pre, a, ol, li, span, label, blockquote, figcaption, abbr, td, input, textarea {
    font-family: 'Comfortaa', arial, sans-serif; 
    font-size: 1em;
    line-height: 150%;
    color: #4A4A4A;
}

strong {
   font-family: 'ComfortaaBold';
   font-weight: normal;
}

由于您已经在导入粗体字体，因此不必再次将字体粗细设置为粗体。相反，将其设置为正常以使其在屏幕上很好地呈现。