当前位置：首页 > news >正文

iconfont和TTF

news 来源：原创 2025/5/12 9:59:21

参考：在react中使用iconfont_react引入iconfont-CSDN博客

1. 区别

• 图标显示：用 IconFont。

• 文本显示：用 TTF。

2. iconfont使用实例

IconFont 是一种通过字体文件（如 TTF、OTF 格式）来展示图标的技术，主要优点是图标的可缩放性和样式的灵活性。常见的使用场景包括：

• Web 开发：通过 <i> 标签和 font-family 引用图标。

• React 开发：通过引用 IconFont 或第三方库（如 react-icons）展示图标。

• React Native：通过第三方库（如 react-native-vector-icons）使用 IconFont 图标。

1. Web 中使用 IconFont

在 Web 开发中，最常见的方式是通过 Font Awesome 或 阿里巴巴图标库（IconFont）等服务提供的图标字体来展示图标。

步骤：

1. 在阿里巴巴 IconFont 上下载图标字体文件，或直接使用其 CDN。

2. 使用 @font-face 引入字体文件，然后通过 font-family 来引用。

示例：

假设你已经从 IconFont 下载了图标字体，并且将文件放在 assets/fonts/ 文件夹中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>IconFont Example</title>
  <style>
    @font-face {
      font-family: 'iconfont';
      src: url('assets/fonts/iconfont.ttf') format('truetype');
    }
    .icon {
      font-family: 'iconfont'; /* 使用下载的字体 */
      font-size: 30px; /* 图标大小 */
      color: #333; /* 图标颜色 */
    }
  </style>
</head>
<body>
  <i class="icon">&#xe600;</i> <!-- 使用图标的 Unicode 字符 -->
  <i class="icon">&#xe601;</i>
</body>
</html>

• @font-face 用于引入 IconFont 字体文件。

• 使用 font-family 来指定字体为 iconfont。

• 图标通过在 <i> 标签中嵌入图标对应的 Unicode 字符（如 ）来展示。

2. React 中使用 IconFont

在 React 中，可以通过 react-icons 或自己集成的 IconFont 来使用图标。下面是一个简单的例子，演示如何在 React 中使用 IconFont。

步骤：

1. 在 public 或 src 文件夹中引入图标字体文件。

2. 使用 className 和相应的 Unicode 来显示图标。

示例：

1. 将 IconFont 的字体文件（例如 iconfont.ttf）放在 public/assets/fonts/ 文件夹中。

2. 在 index.html 或其他组件中引入字体文件：

<!-- 在 public/index.html 文件中引入字体 -->
<link rel="stylesheet" href="/assets/fonts/iconfont.css">

3. 在 React 组件中使用 IconFont：

import React from 'react';
import './App.css';

const App = () => {
  return (
    <div className="App">
      <h1>IconFont Example in React</h1>
      <i className="icon">&#xe600;</i>
      <i className="icon">&#xe601;</i>
    </div>
  );
};

export default App;

4. 在 App.css 中添加样式：

/* 引用字体 */
@font-face {
  font-family: 'iconfont';
  src: url('assets/fonts/iconfont.ttf') format('truetype');
}

.icon {
  font-family: 'iconfont'; /* 使用图标字体 */
  font-size: 50px; /* 图标大小 */
  color: #007bff; /* 图标颜色 */
  margin: 10px;
}

• className=“icon” 用于指定该元素使用图标字体。

• 图标通过 Unicode 字符（例如 ）来渲染。

3. React Native 中使用 IconFont

在 React Native 中，我们可以使用第三方库（如 react-native-vector-icons）来轻松使用图标。也可以通过 IconFont 来实现自定义图标。

步骤：

1. 使用 react-native-vector-icons 安装图标库：

npm install react-native-vector-icons --save

2. 在 react-native.config.js 中进行配置：

module.exports = {
  assets: ['./assets/fonts'], // 配置图标字体路径
};

3. 在代码中使用图标：

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Icon from 'react-native-vector-icons/IconFont'; // 引入Icon组件

const App = () => {
  return (
    <View style={styles.container}>
      <Text>React Native IconFont Example</Text>
      <Icon name="home" size={30} color="#007bff" />
      <Icon name="search" size={30} color="#007bff" />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

4. 在 assets/fonts/ 文件夹下放入 IconFont 字体文件，并在 index.html 中引用。

4. 通过外部库使用 IconFont

除了手动管理 IconFont 字体文件，许多前端库提供了便捷的方式来使用图标字体。比如：

• Font Awesome：提供了一个图标库，可以直接通过 npm 安装并在项目中使用。

• Material Icons：谷歌推出的图标库，可以通过类似的方式在 Web、React 和 React Native 中使用。

例如，使用 react-icons 来集成 Font Awesome 图标：

npm install react-icons --save

import React from 'react';
import { FaBeer, FaCoffee } from 'react-icons/fa';

const App = () => {
  return (
    <div>
      <h1>Icons from react-icons</h1>
      <FaBeer size={50} color="blue" />
      <FaCoffee size={50} color="red" />
    </div>
  );
};

export default App;

• react-icons 提供了很多现成的图标，能够方便地集成到 React 项目中。

3. TTF使用实例

TTF 文件的使用场景：

1. Web 开发：许多 Web 开发者使用 TTF 字体来定制网站的字体。通过 @font-face 在 CSS 中引入 TTF 字体文件，可以使得不同用户设备上显示相同的字体。

2. 桌面应用：TTF 字体可以在不同操作系统上使用，桌面应用如 Microsoft Word、Adobe Photoshop 等支持 TTF 文件。

3. 移动应用：React Native、Android 和 iOS 移动应用都支持使用 TTF 字体，开发者可以自定义应用的字体样式。

如何在项目中使用 TTF 字体：

1. Web 项目：

• 使用 CSS @font-face 规则来加载 TTF 字体文件。

@font-face {
  font-family: 'MyFont';
  src: url('path/to/font.ttf') format('truetype');
}

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

2. React Native 项目：

• 将 TTF 文件放入 assets/fonts 文件夹，并在 react-native.config.js 中进行配置：

module.exports = {
  assets: ['./assets/fonts'],
};

然后在代码中使用：

<Text style={{ fontFamily: 'MyFont' }}>Hello, World!</Text>

4. 原理篇

IconFont 和 TTF 都是字体文件格式，但它们的用途和原理有所不同。下面分别介绍它们的原理以及在前端开发中的应用。

4.1. IconFont

IconFont 是通过字体文件（通常是 .ttf 或 .woff 格式）来存储图标的。每个图标被映射为一个字符，利用 CSS 样式（特别是 font-family 和 content 属性）来显示对应的图标。

原理：
• 字体文件生成：将图标（SVG 图形）转换为字体格式，每个图标占用字体表中的一个位置。例如，图标 home 可能对应字体 U+E001（一个 Unicode 字符），这样就可以通过字体系统来显示该图标。
• CSS 显示：通过 CSS 设置 font-family 为图标字体的名称，content 属性来指定要显示的图标的 Unicode 字符。这样，浏览器就能根据这个字体文件中的字形来显示相应的图标。

IconFont 的特点：
• 灵活性：可以将多个图标打包成一个字体文件，只需通过 CSS 类名来显示不同的图标。
• 性能：字体图标的加载通常比图像图标要快，因为字体文件通常比一组图像文件小，而且在字体文件加载后可以使用多个图标。
• 可缩放性：图标作为字体，能够在任何屏幕分辨率下保持清晰且不失真。

常见工具：
• IconFont：阿里巴巴的图标库，提供了大量的图标可以生成 IconFont 字体文件。
• Fontello：一个图标字体生成工具，用户可以选择图标并生成相应的字体文件。

4.2. TTF（TrueType Font）

TTF（TrueType Font）是一种字体格式，可以包含字形信息（包括字符、符号、字母等）。TTF 字体文件广泛用于系统和应用程序中，提供高质量的显示效果。它不仅可以用于文字，还可以被用来表示图标，如在 IconFont 中使用 TTF 文件来存储图标。

原理：
• 字体字形存储：TTF 文件包含所有字符的字形（矢量图形），每个字符都有一个对应的位图或者矢量形状。
• 渲染机制：操作系统或浏览器通过 TTF 文件中存储的字形信息来渲染文本或图标。当使用 TTF 字体时，操作系统会根据用户的设置（例如大小、颜色等）渲染字体。

TTF 的特点：
• 高质量渲染：TTF 文件使用矢量图形来渲染字符，可以在任何大小下保持清晰度，不会失真。
• 跨平台支持：TTF 是一种广泛使用的字体格式，几乎所有操作系统都能支持，且在不同平台上的表现一致。
• 灵活性：TTF 可以包含所有的文字信息，支持多语言字符集，适用于各种文档、网页和用户界面。

IconFont 和 TTF 的关系：
• IconFont 使用 TTF 文件：IconFont 是利用 TTF 文件中的字符来存储和显示图标，因此它本质上是利用 TTF 字体的特性来显示图标。
• IconFont 是 TTF 字体的一个特殊用途：IconFont 通过将多个图标的矢量图形封装到一个 TTF 文件中，将每个图标映射为一个字符，从而可以通过 CSS 或其他前端技术来显示这些图标。

4.3. 使用场景

1. IconFont：当你需要在网页或移动应用中使用大量图标时，使用 IconFont 是一个高效的解决方案。它减少了多个图像文件的请求，且图标可以灵活地调整大小、颜色和样式，适合用于大多数前端开发场景，尤其是 UI 界面中。
2. TTF：TTF 文件本身是字体文件格式，用于存储字符的字形信息。如果你要开发一个支持多语言的应用或者想要自定义某个字体时，可以使用 TTF 文件。