1

我有一个像这样实现的字体的常规和粗体版本：

@font-face {
  font-family: 'TeXGyreAdventor';
  src: url('../fonts/texgyreadventor-regular-webfont.eot');
  src: url('../fonts/texgyreadventor-regular-webfont.eot?#iefix') format('embedded-opentype'),
  url('../fonts/texgyreadventor-regular-webfont.woff') format('woff'),
  url('../fonts/texgyreadventor-regular-webfont.ttf') format('truetype'),
  url('../fonts/texgyreadventor-regular-webfont.svg#TeXGyreAdventorRegular') format('svg');
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'TeXGyreAdventor';
  src: url('../fonts/texgyreadventor-bold-webfont.eot');
  src: url('../fonts/texgyreadventor-bold-webfont.eot?#iefix') format('embedded-opentype'),
  url('../fonts/texgyreadventor-bold-webfont.woff') format('woff'),
  url('../fonts/texgyreadventor-bold-webfont.ttf') format('truetype'),
  url('../fonts/texgyreadventor-bold-webfont.svg#TeXGyreAdventorbold') format('svg');
  font-weight: bold;
  font-style: normal; }

body { font-family: 'TeXGyreAdventor'; }

现在我希望任何在 CSS 中被告知要使用粗体的字体都使用粗体版本，而其他所有内容都使用常规版本。唉，这行不通。浏览器对所有内容都使用常规版本并实现它自己的人造风格。

另一方面，如果我像这样实现字体：

@font-face {
      font-family: 'TeXGyreAdventor';
      src: url('../fonts/texgyreadventor-regular-webfont.eot');
      src: url('../fonts/texgyreadventor-regular-webfont.eot?#iefix') format('embedded-opentype'),
      url('../fonts/texgyreadventor-regular-webfont.woff') format('woff'),
      url('../fonts/texgyreadventor-regular-webfont.ttf') format('truetype'),
      url('../fonts/texgyreadventor-regular-webfont.svg#TeXGyreAdventorRegular') format('svg');
      font-weight: normal;
      font-style: normal; }

    @font-face {
      font-family: 'TeXGyreAdventorBold';
      src: url('../fonts/texgyreadventor-bold-webfont.eot');
      src: url('../fonts/texgyreadventor-bold-webfont.eot?#iefix') format('embedded-opentype'),
      url('../fonts/texgyreadventor-bold-webfont.woff') format('woff'),
      url('../fonts/texgyreadventor-bold-webfont.ttf') format('truetype'),
      url('../fonts/texgyreadventor-bold-webfont.svg#TeXGyreAdventorbold') format('svg');
      font-weight: normal;
      font-style: normal; }

body { font-family: 'TeXGyreAdventor'; }

b,strong { 
  font-weight: normal;
  font-family: 'TeXGyreAdventorBold'; }

然后它起作用了！是什么赋予了？我认为第一种方法应该可行。难道我做错了什么？浏览器是否无法理解粗体并应用正确版本的字体？我不想为我想要加粗的任何 CSS 声明一个新的字体系列！

4

0 回答 0