my.loadFontFace

loadFontFace

my.loadFontFace là API để load 1 web font.

Khả dụng:Hỗ trợ từ version 1.89.5 trở lên.

Quét mã để trải nghiệm

Hoặc sử dụng link
https://tiki.vn/apps/vn.tiki.miniapp.demo?page=pages/api/load-font-face/index

Xem code mẫu trên Tini Studio

Demo

Trải nghiệm thử với trình giả lập bên dưới

Lưu ý

• Đường dẫn của font phải là đường dẫn có thể download được.
• Trên ios chỉ support đường dẫn https
• Chỉ support woff, otf, ttf, sfnt fonts.

API Params

Thuộc tính	Kiểu dữ liệu	Bắt buộc	Mô tả
family	string	√	Tên font
source	string	√	Đường dẫn của font
desc	String		Thuộc tính của font
success	Function		Callback function khi load font thành công.
fail	Function		Callback function khi việc load font bất thành.
complete	Function		Callback function khi gọi API hoàn tất bất kể thành công hay thất bại.

desc params

Thuộc tính	Kiểu dữ liệu	Mô tả
style	string	Style của font, mặc định là normal. Các giá trị normal/italic/oblique
weight	string	Font weight, mặc định là normal. Các giá trị normal/bold/100/200../900
variant	String	Thiết lập việc có chuyển các "ký tự in thường" trong văn bản sang dạng "ký tự in hoa" hay không. Mặc định là normal. Các giá trị normal/small-caps/inherit.

Sample Code

index.txml

<view>
  <block-header title="Usage" description="Load font face" />
  <view class="block-content">
    <button class="button-full" onTap="onLoadFontFace">Get Font Face</button>
    <text class="test-font">Text after loaded font</text>
  </view>
</view>

index.js

Page({
  onLoadFontFace() {
    my.loadFontFace({
      family: 'Pacifico Regular',
      source: "url('https://sungd.github.io/Pacifico.ttf')",
      success: (res) => {
        my.showAlert({ content: 'Font is load successful' });
      },
      fail: (res) => {
        my.showAlert({ title: JSON.stringify(res) });
      }
    });
  }
});