在哪里可以获得适用于 Android 的 Chrome 中的字体

gpw*_*pwr 3 html css android google-chrome font-family

目前,我在我的网站上使用了适用于 Windows 版 Chrome 的字体,但这些字体不适用于 Android 版 Chrome。

我想使用的字体是HaettenschweilerImpact,但 Android 版 Chrome 浏览器没有这些字体。而是显示纯Arial字体。

为了解决这个问题,最好找出 Chrome for Android 支持哪些字体并从那里获取一些东西。我无法找到有关 Chrome 支持哪些字体的任何信息。Android 版 Chrome 支持哪些字体?

小智 5

这些字体可能适用于您的 Windows,因为您已将它们安装在您的计算机上。要为每个人(和您的其他设备)支持自定义字体,您必须将它们加载到您的网站中。
您提供的字体是授权字体,据我所知,这些需要您付费才能合法使用。因此,对于我的示例,我将使用Roboto

请记住,加载字体后,您仍然必须在 css 中应用它们:

body {
  font-family: 'Roboto', sans-serif;
}
Run Code Online (Sandbox Code Playgroud)

外部字体

外部字体是托管在外部网站上的字体,由您自己导入。寻找免费外部字体的好地方是Google Fonts
有两种方法可以导入外部字体。

您可以像这样将其导入 HTML 的头部:

<head>
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
</head>
Run Code Online (Sandbox Code Playgroud)

或者在你的 CSS 中使用import如下:

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
Run Code Online (Sandbox Code Playgroud)

内部字体

内部字体由您自己托管。您必须在网站上托管字体文件,并使用font-face规则加载它们,如下所示:

@font-face {
  font-family: 'Roboto';
  src: url('roboto.eot'); /* IE9 Compat Modes */
  src: url('roboto.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('roboto.woff') format('woff'), /* Modern Browsers */
  url('roboto.ttf')  format('truetype'), /* Safari, Android, iOS */
  url('roboto.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Run Code Online (Sandbox Code Playgroud)