Font Awesome을 JSF와 통합하고 글꼴 파일 문제를 해결하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

Font Awesome을 JSF와 통합하고 글꼴 파일 문제를 해결하는 방법은 무엇입니까?

DDD

풀어 주다： 2024-10-29 13:08:02

원래의

258명이 탐색했습니다.

How to Integrate Font Awesome with JSF and Resolve Font File Issues?

JSF와 Font Awesome 통합: 글꼴 파일 문제 해결

Font Awesome을 JSF에 통합할 때 브라우저에 아이콘 대신 빈 사각형이 표시되는 문제가 발생할 수 있습니다. 이 오류는 리소스 처리를 위해 JSF에서 사용하는 수정된 경로로 인해 해결되지 않는 상대 경로를 사용하여 CSS 파일이 글꼴 파일을 참조할 때 발생합니다.

문제 이해

기본 Font Awesome CSS 파일 ../fonts/와 같은 상대 경로를 사용하여 글꼴 파일을 참조합니다. 그러나 를 사용하여 JSF에 CSS 파일을 포함시키면 JSF는 특별한 /javax.faces.resource를 할당합니다. /* JSF 리소스 핸들러를 호출하기 위한 리소스 접두사.

해결책: CSS 참조 수정

문제를 해결하려면 CSS 파일을 편집하고 관련 글꼴 파일 참조를 바꿔야 합니다. #{resource} EL 매핑과 적절한 라이브러리 및 리소스 이름을 사용하는 절대 참조가 있습니다. 예를 들어 다음과 같은 구조에서

WebContent
 |-- resources
 |    `-- font-awesome
 |         |-- css
 |         |    |-- font-awesome.css
 |         |    `-- font-awesome.min.css
 |         `-- fonts
 |              |-- fontawesome-webfont.eot
 |              |-- fontawesome-webfont.svg
 |              |-- fontawesome-webfont.ttf
 |              |-- fontawesome-webfont.woff
 |              `-- fontawesome-webfont.woff2

로그인 후 복사

다음과 같이 CSS 파일을 편집합니다.

<code class="css">@font-face {
  font-family: 'FontAwesome';
  src: url("#{resource['font-awesome:fonts/fontawesome-webfont.eot']}&amp;v=4.3.0");
  src: url("#{resource['font-awesome:fonts/fontawesome-webfont.eot']}&amp;#iefix&amp;v=4.3.0") format('embedded-opentype'),
       url("#{resource['font-awesome:fonts/fontawesome-webfont.woff2']}&amp;v=4.3.0") format('woff2'),
       url("#{resource['font-awesome:fonts/fontawesome-webfont.woff']}&amp;v=4.3.0") format('woff'),
       url("#{resource['font-awesome:fonts/fontawesome-webfont.ttf']}&amp;v=4.3.0") format('truetype'),
       url("#{resource['font-awesome:fonts/fontawesome-webfont.svg']}&amp;v=4.3.0#fontawesomeregular") format('svg');
  font-weight: normal;
  font-style: normal;
}</code>

로그인 후 복사

Mime 유형 매핑 및 JSF1091 경고

JSF1091이 발생할 수도 있습니다. 특정 파일 형식에 MIME 형식 매핑이 없으면 경고가 표시됩니다. 예를 들어 SVG 및 WOFF2 파일이 있습니다. 이 문제를 해결하려면 web.xml에 다음 MIME 매핑을 추가하세요.

<code class="xml"><mime-mapping>
    <extension>eot</extension>
    <mime-type>application/vnd.ms-fontobject</mime-type>
</mime-mapping>
<mime-mapping>
    <extension>otf</extension>
    <mime-type>font/opentype</mime-type>
</mime-mapping>
<mime-mapping>
    <extension>svg</extension>
    <mime-type>image/svg+xml</mime-type>
</mime-mapping>
<mime-mapping>
    <extension>ttf</extension>
    <mime-type>application/x-font-ttf</mime-type>
</mime-mapping>
<mime-mapping>
    <extension>woff</extension>
    <mime-type>application/x-font-woff</mime-type>
</mime-mapping>
<mime-mapping>
    <extension>woff2</extension>
    <mime-type>application/x-font-woff2</mime-type>
</mime-mapping></code>

로그인 후 복사

OmniFaces를 사용한 대체 접근 방식

OmniFaces를 사용하는 경우 OmniFaces UnmappedResourceHandler를 설치하고 FacesServlet을 재구성할 수 있습니다. 누락된 MIME 유형 매핑을 자동으로 처리하는 매핑입니다. 그러나 이 경우 라이브러리 속성을 사용하지 않고 글꼴 CSS 파일을 참조해야 합니다.

<code class="xml"><h:outputStylesheet name="font-awesome/css/font-awesome.min.css" / ></code>

로그인 후 복사

추가 리소스

[webjars.org에서 Font Awesome을 사용하는 방법 JSF](https://stackoverflow.com/questions/21419280/how-to-use-font-awesome-from-webjars-org-with-jsf)

위 내용은 Font Awesome을 JSF와 통합하고 글꼴 파일 문제를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!