So verweisen Sie im WeChat-Applet wxss auf externe CSS-Dateien und Iconfonts

Ursache

So importieren Sie externe Dateien in ein Miniprogramm: @import "*/*.wxss";

Aus geschäftlichen Gründen muss in dem zu entwickelnden kleinen Programm Iconfont verwendet werden. Die Einführungsmethode von H5 ist leicht zu finden:

````
@font-face {Schriftfamilie: "Iconfont";
 Quelle: url('iconfont.eot?t=1485242349767'); /* IE9*/
 Quelle: URL('iconfont.eot?t=1485242349767#iefix') Format('embedded-opentype'), /* IE6-IE8 */
 url('iconfont.woff?t=1485242349767') format('woff'), /* Chrom, Firefox */
 url('iconfont.ttf?t=1485242349767') format('truetype'), /* Chrome, Firefox, Opera, Safari, Android, iOS 4.2+*/
 url('iconfont.svg?t=1485242349767#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
 Schriftfamilie: „Iconfont“ !wichtig;
 Schriftgröße: 16px;
 Schriftstil: normal;
 -webkit-font-smoothing: Kantenglättung;
 -moz-osx-font-smoothing: Graustufen;
}

````

Da dieser CSS-Stil universell ist, wird er in lib/style/font.wxss abgelegt. Das Dateiverzeichnis lautet wie folgt:

Es wird zwar per @import in die gewünschte Datei eingefügt, hat aber keine Wirkung.

Grund: Die Font-Face-URL der wxss-Datei des Applets akzeptiert die http-Adresse nicht als Parameter, kann aber base64 akzeptieren. Daher können Sie zuerst die Schriftdatei herunterladen, sie in base64 konvertieren und dann darauf verweisen.

Die Lösung lautet wie folgt:

1. Gehen Sie zunächst zur Alibaba-Vektorsymbolbibliothek (http://iconfont.cn/), um Ihr eigenes Schriftsymbol zu generieren, laden Sie es herunter und suchen Sie die Datei im TTF-Format

2. Gehen Sie auf diese Plattform https://transfonter.org/ und konvertieren Sie die Schriftdatei in das Base64-Format

3. In die Lib-Datei einführen

4. Fügen Sie Schriftarten zu wxss hinzu

5. Anzeigeeffekt

Zusammenfassen

Dies ist das Ende dieses Artikels darüber, wie das WeChat-Miniprogramm wxss auf externe CSS-Dateien und Iconfonts verweist. Weitere relevante Inhalte zum Verweisen auf externe Dateien des Miniprogramms wxss finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den unten stehenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!