최근에는 프론트엔드 기술의 지속적인 발전으로 경량화된 아이콘 솔루션인 폰트 아이콘이 웹과 모바일 디자인에서 널리 사용되고 있습니다. 유니앱을 이용하여 모바일 애플리케이션을 개발할 때, 폰트 아이콘도 쉽게 사용할 수 있는데, 패키징 후 폰트 아이콘이 제대로 표시되지 않는 문제가 종종 발생합니다. 오늘은 유니앱을 패키징한 후 글꼴 아이콘이 표시되지 않는 이유와 해결 방법에 대해 알아보겠습니다.
우선 uniapp이 패키징된 후 dist 디렉터리가 생성된다는 점을 이해해야 합니다. 리소스 파일과 HTML 파일을 기다리세요. 우리가 글꼴 아이콘을 사용할 때 실제로는 HTML 파일에 CSS 스타일을 사용하고 데이터 소스를 글꼴 아이콘의 글꼴 파일로 설정하기 때문에 HTML 파일이나 글꼴 파일에서 문제가 발생할 수 있습니다.
가장 일반적인 상황은 글꼴 파일이 성공적으로 로드되지 않아 글꼴 아이콘이 표시되지 않는 것입니다. F12 개발자 도구를 통해 콘솔 출력을 볼 수 있습니다. 404 또는 네트워크 오류가 발생하고 글꼴 파일이 요청 실패 상태인 경우 글꼴 파일이 성공적으로 로드되지 않은 것으로 판단할 수 있습니다.
또 다른 가능성은 글꼴을 소개하는 주소가 잘못되었다는 것입니다. uniapp은 리소스 파일을 소개하기 위해 상대 경로를 사용하기 때문에 HTML 파일과 글꼴 파일이 동일한 폴더에 있는지 확인해야 합니다. 파일 경로 오류가 발생하면 글꼴 아이콘이 제대로 표시되지 않습니다. 마찬가지로 콘솔 출력을 통해 경로 오류가 있는지 확인할 수 있습니다.
글꼴 파일이 성공적으로 로드되지 않으면 글꼴 파일을 로컬 리소스에 추가한 다음 로컬 상대 경로를 사용하여 HTML 파일에서 참조할 수 있습니다.
fonts 폴더를 만들고 다운로드한 글꼴 파일을 이 폴더에 추출하세요. fonts文件夹，将下载的字体文件解压到该文件夹中。进入uni.scss文件，引入字体文件，如下所示：
@font-face{
font-family:'iconfont';
src:url(../fonts/iconfont.ttf) format('truetype');
}这里需要注意，@font-face 中 font-family 的名称需要和HTML中使用的字体名称保持一致。
在HTML文件中使用字体图标，如下所示：
<i class="uni-icon uni-icon-wode"></i>
这里的uni-icon-wode是我们在字体文件中自定义的图标类名，而uni-icon是uni.scss中定义的基础类。
若通过此方法解决了字体图标无法显示的问题，那么恭喜你，问题已经得到了解决。但是，有时即使我们已经按照上述方法来处理，字体图标依然无法正常显示，这时就可以尝试下面的方法。
有时我们会发现字体文件本地引用失败，那么我们可以考虑使用cdn来解决该问题。但是在使用cdn时，需要保证我们引入的cdn地址正确，并且由于cdn地址可能受到网络影响，所以最好提供多个备选方案。修改方式如下：
在manifest.json 文件中，添加字体文件的资源地址，如下所示：
"networkTimeout": {
"request": 5000,
"downloadFile": 10000
},
"onDemandResourceRules": [
{
"host": "xxxxx.com",
"files": [
"/fonts/iconfont.ttf"
]
}
],
"preloadRule": {
"async": [
{"path": "xxxxx.com/fonts/iconfont.ttf"}
],
"sync": [
]
}其中xxxxx.com为我们指定cdn的域名。
在uni.scss 文件中使用cdn地址，如下所示：
@font-face{
font-family:'iconfont';
src:url(//xxxxx.com/fonts/iconfont.ttf) format('truetype');
}这里的// 表示使用了协议相同的相对路径，适用于http、https等。
在HTML文件中使用字体图标，如下所示：
<i class="uni-icon uni-icon-wode"></i>
同样，这里的uni-icon-wode
uni.scss 파일을 입력하고 글꼴 파일을 가져옵니다. 여기서 @font-face의 <code>font-family /code>의 이름은 HTML에서 사용되는 글꼴 이름과 일치해야 합니다.
uni-icon-wode는 글꼴 파일에서 사용자 정의한 아이콘 클래스 이름이고 uni-icon code>는 uni.scss에 정의된 기본 클래스입니다. 🎜🎜🎜🎜이 방법으로 글꼴 아이콘이 표시되지 않는 문제를 해결했다면 축하합니다. 문제가 해결되었습니다. 그러나 위의 방법을 따랐음에도 불구하고 글꼴 아이콘이 여전히 정상적으로 표시되지 않는 경우가 있습니다. 이 경우 다음 방법을 시도해 볼 수 있습니다. 🎜🎜2. cdn 사용🎜🎜때때로 글꼴 파일의 로컬 참조가 실패하는 경우 cdn을 사용하여 문제를 해결할 수 있습니다. 하지만 CDN을 사용할 때에는 우리가 소개하는 CDN 주소가 정확한지 확인해야 하며, CDN 주소는 네트워크의 영향을 받을 수 있으므로 여러 가지 대안을 제공하는 것이 가장 좋습니다. 수정 방법은 다음과 같습니다. 🎜🎜🎜🎜<code>manifest.json 파일에 아래와 같이 글꼴 파일의 리소스 주소를 추가합니다. 🎜rrreee🎜여기서 xxxxx.com code>가 우리에게 지정됩니다. CDN의 도메인 이름입니다. 🎜🎜🎜🎜아래와 같이 <code>uni.scss 파일의 cdn 주소를 사용하세요. 🎜rrreee🎜여기서 //는 동일한 프로토콜을 사용하는 상대 경로가 http, https 등에 적합한 것을 사용합니다. 🎜🎜🎜🎜HTML 파일에서 다음과 같이 글꼴 아이콘을 사용하세요. 🎜rrreee🎜마찬가지로 uni-icon-wode는 글꼴 파일에서 사용자 정의한 아이콘 클래스 이름입니다. 🎜🎜🎜🎜CDN을 사용할 때 불안정한 연결, 캐시 제한을 초과하는 파일 등 다른 문제도 발생할 수 있으므로 더 많은 테스트와 백업 계획을 수행해야 합니다. 🎜🎜일반적으로 유니앱을 사용하여 모바일 애플리케이션을 개발할 때 글꼴 아이콘은 좋고 가벼운 아이콘 솔루션이지만, 패키징의 복잡성 및 리소스 처리 방식 등의 문제로 인해 글꼴 아이콘이 정상적으로 표시되지 않을 수 있습니다. 위의 두 가지 방법은 이러한 문제를 해결하고 애플리케이션을 더욱 아름답고 실용적으로 만드는 데 도움이 될 수 있습니다. 🎜위 내용은 uniapp을 패키징한 후 글꼴 아이콘이 표시되지 않으면 어떻게 해야 하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
