찾다
웹 프론트엔드JS 튜토리얼멋진 글꼴 패키징 사용 사례 분석(코드 포함)

이번에는 Font-Awesome 글꼴 패키징 사용 사례 분석(코드 포함)을 가져왔는데, Font-Awesome 글꼴 패키징 사용 시 주의사항은 무엇인가요? 다음은 실제 사례입니다. 살펴보겠습니다.

1. 먼저 종속성을 설치합니다.

npm install style-loader css-loader file-loader font-awesome-webpack --save-dev

2. 항목 파일

require('font-awesome-webpack');

3에 Font-awesome을 도입하여 글꼴 파일을 처리하도록 설정합니다.

두 가지가 있습니다. 여기서는 폰트 파일을 따로 생성하고 싶지 않고, 폰트 파일과 CSS 파일을 하나의 파일로 만들고 싶다면 url-loader를 사용해서 다음과 같이 설정하면 됩니다.

  module: {
      rules: [
        // 省略其他配置...
        // font-awesome
        {
          test: /\.(eot|svg|ttf|woff|woff2)\w*/,
          loader: 'url-loader?limit=1000000'
        },
        // 省略其他配置...
      ]
  }

여기서 매개변수 제한이 통과되었습니다. url-loader에 상대적으로 크게 설정하면 이 숫자를 사용자 정의할 수 있지만 가장 큰 글꼴 파일의 크기보다 커야 합니다. 왜냐하면 이 매개변수는 파일이 이 매개변수보다 작을 경우 URL 로더에 Data Url 형식으로 파일에 직접 내장됩니다. 이 방법이 가장 편리하지만, 구축된 파일이 매우 크고 온라인 상태에서는 CDN을 사용하여 파일을 캐시할 수 있는 방법이 없다는 단점이 있습니다.

두 번째 방법은 빌드할 때 url-loader 또는 file-loader 파일의 출력 디렉터리를 지정하는 것입니다. 그러면 배포 시 Font-awesome이 빌드 중에 지정된 디렉터리의 글꼴 파일에 의존하고 검색이 수행되지 않습니다. 이때 webpack 빌드 구성은 다음과 같습니다.

  module: {
  rules: [
    // 省略其他配置...
    // font-awesome
    {
      test: /\.(eot|svg|ttf|woff|woff2)\w*/,
      loader: 'file-loader?publicPath=/static/res/&outputPath=font/'
    },
    // 省略其他配置...
  ]
}

위 구성으로 프로젝트를 빌드한 후, Font-awesome은 "/static/"에서 지정된 글꼴 파일을 검색합니다. res/font/" 디렉토리와 동시에 해당 글꼴 폴더가 빌드한 프로젝트에 생성됩니다. 이 글꼴 폴더의 글꼴 파일을 "/static/res/font" 디렉토리( publicPath가 "./" 이면 빌드 디렉터리의 글꼴 파일에 직접 의존하므로(복사할 필요 없음) 페이지에 액세스할 때 글꼴 파일을 올바르게 요청할 수 있습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

vue 인터셉터 호환성 처리

콘솔에서 로그 정보를 인쇄하는 방법

jQuery는 마우스 바인딩 이벤트 이미지 확대 기능을 구현합니다

위 내용은 멋진 글꼴 패키징 사용 사례 분석(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
如何在Go中使用命名管道?如何在Go中使用命名管道?May 11, 2023 pm 04:22 PM

命名管道是一种在操作系统中相对比较低级的进程通信方式,它是一种以文件为中介的进程通信方式。在Go语言中,通过os包提供了对命名管道的支持。在本文中,我们将介绍如何在Go中使用命名管道来实现进程间通信。一、命名管道的概念命名管道是一种特殊的文件,可以被多个进程同时访问。在Linux系统中,命名管道是一种特殊的文件类型,它们存在于文件系统的某个位置上,并且可以在

如何在Go中使用第三方库?如何在Go中使用第三方库?May 11, 2023 pm 03:30 PM

在Go语言中,使用第三方库是非常方便的。许多优秀的第三方库和框架可以帮助我们快速地开发应用程序,同时也减少了我们自己编写代码的工作量。但是如何正确地使用第三方库,确保其稳定性和可靠性,是我们必须了解的一个问题。本文将从以下几个方面介绍如何使用第三方库,并结合具体例子进行讲解。一、第三方库的获取Go语言中获取第三方库有以下两种方式:1.使用goget命令首先

如何在PHP中使用协程?如何在PHP中使用协程?May 12, 2023 am 08:10 AM

随着传统的多线程模型在高并发场景下的性能瓶颈,协程成为了PHP编程领域的热门话题。协程是一种轻量级的线程,能够在单线程中实现多任务的并发执行。在PHP的语言生态中,协程得到了广泛的应用,比如Swoole、Workerman等框架就提供了对协程的支持。那么,如何在PHP中使用协程呢?本文将介绍一些基本的使用方法以及常见的注意事项,帮助读者了解协程的运作原理,以

如何在 Windows 11 中按需使用 OneDrive 的文件如何在 Windows 11 中按需使用 OneDrive 的文件Apr 14, 2023 pm 12:34 PM

<p>Windows 系统上的 OneDrive 应用程序允许您将文件存储在高达 5 GB 的云上。OneDrive 应用程序中还有另一个功能,它允许用户选择一个选项,是将文件保留在系统空间上还是在线提供,而不占用您的系统存储空间。此功能称为按需文件。在这篇文章中,我们进一步探索了此功能,并解释了有关如何在 Windows 11 电脑上的 OneDrive 中按需使用文件的各种选项。</p><h2>如何使用 On

如何在Go中使用WebSocket?如何在Go中使用WebSocket?May 11, 2023 pm 04:17 PM

近年来,WebSocket技术已经成为了Web开发中不可或缺的一部分。WebSocket是一种在单个TCP连接上进行全双工通信的协议,它使得客户端和服务器之间的通信更加流畅和高效。如今,很多现代的Web应用程序都使用了WebSocket技术,例如实时聊天、在线游戏以及实时数据可视化等。Go语言作为一个现代的编程语言,自然也提供了很好的支持WebSock

如何在Go中使用音频处理?如何在Go中使用音频处理?May 11, 2023 pm 04:37 PM

随着音频处理在各种应用场景中的普及,越来越多的程序员开始使用Go编写音频处理程序。Go语言作为一种现代化的编程语言,具有优秀的并发性和高效率的特点,使用它进行音频处理十分方便。本文将介绍如何在Go中使用音频处理技术,包括读取、写入、处理和分析音频数据等方面的内容。一、读取音频数据在Go中读取音频数据有多种方式。其中比较常用的是使用第三方库进行读取,比如go-

如何在Go中使用嵌套结构?如何在Go中使用嵌套结构?May 11, 2023 pm 04:39 PM

在Go语言中,嵌套结构是一种非常常见的技术。通过将一个结构体嵌入到另一个结构体中,我们可以将复杂的数据模型分解成更小的部分,使其易于理解和维护。本篇文章将介绍如何在Go中使用嵌套结构以及一些最佳实践。一、定义嵌套结构首先,我们需要定义一个包含嵌套结构的结构体。下面的代码演示了如何定义一个包含Person结构体的Company结构体:typePersons

如何在Go中使用反转依赖?如何在Go中使用反转依赖?May 11, 2023 pm 03:39 PM

Go语言中的反转依赖是一种非常实用的技术,它可以帮助开发者更好地进行软件开发。在本文中,我们将详细介绍什么是反转依赖,并且演示如何在Go语言中使用它来优化软件。一、什么是反转依赖在传统的软件开发中,模块之间存在着依赖关系。一些模块被其他模块所依赖,而另一些模块则依赖于其他模块。这种依赖关系在软件中非常普遍,但同时也会带来很多问题。一旦一个模块的代码发生了变化

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구