Bagaimana untuk Mengintegrasikan Font Hebat dengan JSF dan Menyelesaikan Isu Fail Fon?

Mengintegrasikan Font Awesome dengan JSF: Menyelesaikan Isu Fail Fon

Apabila memasukkan Font Awesome ke dalam JSF, anda mungkin menghadapi masalah apabila penyemak imbas memaparkan petak kosong dan bukannya ikon. Ralat ini berlaku apabila fail CSS merujuk fail fon menggunakan laluan relatif yang gagal diselesaikan disebabkan oleh laluan diubah suai yang digunakan oleh JSF untuk pengendalian sumber.

Memahami Isu

Fail CSS Fon Awesome lalai fail fon rujukan menggunakan laluan relatif seperti ../fonts/. Walau bagaimanapun, apabila anda memasukkan fail CSS dalam JSF menggunakan , JSF memperuntukkan /javax.faces.resource khas /* awalan kepada sumber untuk menggunakan pengendali sumber JSF.

Penyelesaian: Mengubah suai Rujukan CSS

Untuk menyelesaikan isu ini, anda perlu mengedit fail CSS dan menggantikan rujukan fail fon relatif dengan rujukan mutlak menggunakan pemetaan #{resource} EL dan nama perpustakaan serta sumber yang sesuai. Contohnya, dalam struktur seperti:

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

Edit fail CSS seperti berikut:

<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>

Pemetaan Jenis Mime dan Amaran JSF1091

Anda juga mungkin menghadapi JSF1091 amaran jika jenis fail tertentu tidak mempunyai pemetaan jenis mime. Contohnya, fail SVG dan WOFF2. Untuk menyelesaikan masalah ini, tambahkan pemetaan mime berikut pada web.xml:

<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>

Pendekatan Alternatif dengan OmniFaces

Jika anda menggunakan OmniFaces, anda boleh memasang OmniFaces UnmappedResourceHandler dan mengkonfigurasi semula FacesServlet pemetaan untuk mengendalikan pemetaan jenis mime yang hilang secara automatik. Walau bagaimanapun, anda perlu merujuk fail CSS fon tanpa menggunakan atribut perpustakaan dalam kes ini:

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

Sumber Tambahan

• [Cara menggunakan Font Awesome daripada webjars.org dengan JSF](https://stackoverflow.com/questions/21419280/how-to-use-font-awesome-from-webjars-org-with-jsf)

Atas ialah kandungan terperinci Bagaimana untuk Mengintegrasikan Font Hebat dengan JSF dan Menyelesaikan Isu Fail Fon?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!