星途面试题库

面试题：CSS 中@font - face与Google Fonts在字体引入方面的基本差异

请阐述在 CSS 中使用@font - face和Google Fonts引入字体的基本方式，并说明它们在使用场景、兼容性方面的主要差异。

50.5万热度

难度

前端开发CSS

知识考点

AI 面试

面试题答案

@font-face 引入字体基本方式

定义字体描述：在CSS中使用@font-face规则来定义自定义字体。

@font-face {
  font-family: 'MyFont'; /* 自定义字体名称 */
  src: url('path/to/font.woff2') format('woff2'),
       url('path/to/font.woff') format('woff'),
       url('path/to/font.ttf') format('truetype'),
       url('path/to/font.eot') format('embedded - opentype');
  font-weight: normal;
  font-style: normal;
}

应用字体：在需要使用该字体的元素上通过font-family属性引用定义的字体名称。

body {
  font-family: 'MyFont', sans - serif;
}

Google Fonts引入字体基本方式

在HTML中引入：在HTML的<head>标签内添加<link>标签。

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap">
</head>

应用字体：在CSS中通过font-family属性引用Google Fonts提供的字体名称。

body {
  font-family: 'Open Sans', sans - serif;
}

使用场景差异

@font-face：适用于项目需要使用特定、非标准字体，且字体文件可自行管理和部署的场景。例如，企业品牌字体或独特设计字体。
Google Fonts：适合快速搭建网站，需要使用常见、流行字体的场景。无需自行管理字体文件，节省项目资源管理成本。

兼容性差异

@font-face：现代浏览器都广泛支持，但旧版本浏览器可能存在兼容性问题。如IE8及以下版本仅支持.eot格式字体，需要特别处理。
Google Fonts：由于Google Fonts提供的字体格式是经过优化的，在现代浏览器上兼容性良好。但在网络连接不稳定或被限制访问Google服务的环境下，字体加载可能失败。