为卡片加载自定义字体并使用font-family-移动开发平台 mPaaS-阿里云

设置字体

Android

请在卡片初始化完成后，设置字体。

HashMap<String, String> fonts = new HashMap<>();
fonts.put("AlipayNumber", "local://antui_res/AlipayNumber.ttf");
CubeService.instance().getEngine().loadCustomFonts(fonts);

map 中的 key，对应卡片 font-family 的 value。
map 中的 value，是字体资源 assets 路径，需要以 local:// 开头，上面示例代码中的 local://antui_res/AlipayNumber.ttf 表示资源路径为 assets/antui_res/AlipayNumber.ttf。

iOS

请在卡片初始化完成后，设置字体。

    NSMutableDictionary *fontMap = [[NSMutableDictionary alloc] init];
    NSString *alipayNumberFont = [[NSBundle mainBundle] pathForResource:@"AlipayNumber.ttf" ofType:nil];
    NSString *dncFont = [[NSBundle mainBundle] pathForResource:@"DNC57.ttf" ofType:nil];
    NSURL *aliPayFontUrl = [NSURL URLWithString:alipayNumberFont];
    NSURL *dncFontUrl = [NSURL URLWithString:dncFont];
    [fontMap setObject:aliPayFontUrl forKey:@"AlipayNumber"];
    [fontMap setObject:dncFontUrl forKey:@"DNC57"];
    [[[CubeService sharedInstance] getEngine] loadFonts:fontMap];

鸿蒙

暂不支持

卡片中使用字体

<template>
    <div class="root">
        <text class="message" :value="message" @click="onClick()"></text>
        <text class="message2" :value="message" @click="onClick()"></text>
    </div>
</template>

<script>
export default {
    data: {
        message: 'Hello Cube 1'
    },
    beforeCreate() {
        this.message = '0123456789'
    },
    didAppear() {

    },
    methods: {
        onClick() {
            this.message = "aaa"
        }
    }
}
</script>

<style>
.root {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
    width: 100%;
    height: 400rpx;
}

.message {
    color: black;
    font-size: 80rpx;
}

.message2 {
    font-family: AlipayNumber;
    color: black;
    font-size: 80rpx;
}
</style>

在 CSS 样式中，加入 font-family 参数，即可使用。value 为客户端预置的参数。