uni-app 引入第三方字体

性凉薄 發表於 2021-12-8 22:29:00

<code>uni-app</code> 支持使用字体图标，使用方式与普通 <code>web</code> 项目相同，需要注意以下几点：
<ul>
<li>支持 base64 格式字体图标。</li>
<li>支持网络路径字体图标。</li>
<li>小程序不支持在css中使用本地文件，包括本地的背景图和字体文件。需以base64方式方可使用。</li>
<li>网络路径必须加协议头 <code>https</code>。</li>
<li>从 http://www.iconfont.cn 上拷贝的代码，默认是没加协议头的。</li>
<li>从 http://www.iconfont.cn 上下载的字体文件，都是同名字体（字体名都叫iconfont，安装字体文件时可以看到），在nvue内使用时需要注意，此字体名重复可能会显示不正常，可以使用工具修改。</li>
<li>使用本地路径图标字体需注意：<ol>
<li>为方便开发者，在字体文件小于 40kb 时，<code>uni-app</code> 会自动将其转化为 base64 格式；</li>
<li>字体文件大于等于 40kb，仍转换为 base64 方式使用的话可能有性能问题，如开发者必须使用，则需自己将其转换为 base64 格式使用，或将其挪到服务器上，从网络地址引用；</li>
<li>字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;"> @font-face {
font-family: test1-icon;
src: url('~@/static/iconfont.ttf');
}
</pre>
</div>
<pre data-lang="css"><code class="lang-css"> </code></pre>
</li>
</ol></li>
</ul>
<code>nvue</code>中不可直接使用css的方式引入字体文件，需要使用以下方式在js内引入。nvue内不支持本地路径引入字体，请使用网络链接或者<code>base64</code>形式。<code>src</code>字段的<code>url</code>的括号内一定要使用单引号。
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">var domModule = weex.requireModule('dom');
domModule.addRule('fontFace', {
'fontFamily': "fontFamilyName",
'src': "url('https://...')"
})
</pre>
</div>
 
示例：
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;"><template>
<view>
 <view>
 <text class="test"></text>
 <text class="test"></text>
 <text class="test"></text>
 </view>
</view>
</template>
<style>
@font-face {
 font-family: 'iconfont';
 src: url('https://at.alicdn.com/t/font_865816_17gjspmmrkti.ttf') format('truetype');
}
.test {
 font-family: iconfont;
 margin-left: 20rpx;
}
</style>
</pre>
</div>
 
上述为官网的描述
 
在开发中需要注意：
<ol>
<li> 需要注意的是.ttf字体文件需要放置到static文件夹下</li>
<li>字体文件若大于40kb，需要将其装换成base64格式</li>
<li>在线转换工具base64在线转换</li>
</ol>
<pre data-lang="html">一个中文的字体库，往往几兆十几兆，而我们通常只会使用到其中十几个字体样式，我们可以使用Fontmin把需要用到的字提取出来</pre>
<pre data-lang="html"><code class="lang-html"><img src="https://img2020.cnblogs.com/blog/1770505/202112/1770505-20211208224058163-1102034710.png" alt="" loading="lazy"></code></pre>
 
成功之后得到一个文件夹，里边有各种格式的字体
<img src="https://img2020.cnblogs.com/blog/1770505/202112/1770505-20211208224303460-2096728907.png" alt="" loading="lazy">
 
 
 字体引入方式:
<ul>
<li>网络路径字体</li>
</ul>
<img src="https://img2020.cnblogs.com/blog/1770505/202112/1770505-20211208225556594-275596535.png" alt="" loading="lazy">
 
App.vue引入字体
 <img src="https://img2020.cnblogs.com/blog/1770505/202112/1770505-20211208225639762-1931277912.png" alt="" loading="lazy">
 
 
使用字体：
<img src="https://img2020.cnblogs.com/blog/1770505/202112/1770505-20211208225818015-624216698.png" alt="" loading="lazy">
 
 
<ul>
<li>base64格式引入</li>
</ul>
 <img src="https://img2020.cnblogs.com/blog/1770505/202112/1770505-20211208230252193-1942654804.png" alt="" loading="lazy">
 
 
 
 
 
 
 
 
 
 
 
 
<pre data-lang="html"><code class="lang-html"> </code></pre> 
来源：https://www.cnblogs.com/Intellectualscholar/p/15664764.html

頁: [1]

琼殿技术论坛's Archiver

uni-app 引入第三方字体