使用 Font Awesome 但字体不流畅

Question

我在此页面上使用的是 Font Awesome。

但是文字看起来还是不太流畅：

在这个网站上，它很流畅： https://www.yang2020.com/events/

我错过了什么才能让它变得如此顺利？

两个页面都有font-family: 'Awesome Font', sans-serif

Answer 1

这是因为您提到的页面（工作页面）在

中定义了字体

https://www.yang2020.com/wp-content/themes/aspire-pro/AvenirNext/avenir_next.css?ver=1.2

您需要定义字体才能像下面css

中那样使用它

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 700;
  src: local('Awesome Font Bold'),
       url('/wp-content/themes/aspire-pro/AvenirNext/font-files/AvenirNextLTPro-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Awesome Font';
  font-style: italic;
  font-weight: 700;
  src: local('Awesome Font Bold Italic'),
       url('/wp-content/themes/aspire-pro/AvenirNext/font-files/AvenirNextLTPro-BoldIt.ttf') format('truetype');
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 600;
  src: local('Awesome Font DemiBold'),
       url('/wp-content/themes/aspire-pro/AvenirNext/font-files/AvenirNextLTPro-Demi.ttf') format('truetype');
}

@font-face {
  font-family: 'Awesome Font';
  font-style: italic;
  font-weight: 600;
  src: local('Awesome Font DemiBold Italic'),
       url('/wp-content/themes/aspire-pro/AvenirNext/font-files/AvenirNextLTPro-DemiIt.ttf') format('truetype');
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 900;
  src: local('Awesome Font Heavy'),
       url('/wp-content/themes/aspire-pro/AvenirNext/font-files/AvenirNextLTPro-Heavy.ttf') format('truetype');
}

@font-face {
  font-family: 'Awesome Font';
  font-style: italic;
  font-weight: 900;
  src: local('Awesome Font Heavy Italic'),
       url('/wp-content/themes/aspire-pro/AvenirNext/font-files/AvenirNextLTPro-HeavyIt.ttf') format('truetype');
}

@font-face {
  font-family: 'Awesome Font';
  font-style: italic;
  font-weight: 400;
  src: local('Awesome Font Italic'),
       url('/wp-content/themes/aspire-pro/AvenirNext/font-files/AvenirNextLTPro-It.ttf') format('truetype');
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 300;
  src: local('Awesome Font Light'),
       url('/wp-content/themes/aspire-pro/AvenirNext/font-files/AvenirNextLTPro-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'Awesome Font';
  font-style: italic;
  font-weight: 300;
  src: local('Awesome Font Light Italic'),
       url('/wp-content/themes/aspire-pro/AvenirNext/font-files/AvenirNextLTPro-LightIt.ttf') format('truetype');
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 500;
  src: local('Awesome Font Medium'),
       url('/wp-content/themes/aspire-pro/AvenirNext/font-files/AvenirNextLTPro-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'Awesome Font';
  font-style: italic;
  font-weight: 500;
  src: local('Awesome Font Medium Italic'),
       url('/wp-content/themes/aspire-pro/AvenirNext/font-files/AvenirNextLTPro-MediumIt.ttf') format('truetype');
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/wp-content/themes/aspire-pro/AvenirNext/font-files/AvenirNextLTPro-Regular.ttf') format('truetype');
}

使用 Font Awesome 但字体不流畅

Using Font Awesome but font isn't smooth

css

font-awesome