How to set custom fonts in cards-Mobile Platform as a Service(mPaaS)-阿里云帮助中心

Set fonts

Android

Set the font after the card is initialized.

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

The key in the map corresponds to the value of the card's font-family.
The value in the map is the path of the font resource in your assets. The path must start with local://. For example, local://antui_res/AlipayNumber.ttf indicates that the resource path is assets/antui_res/AlipayNumber.ttf.

iOS

Set the font after the card is initialized.

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

HarmonyOS

Currently not supported.

Use fonts in cards

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

To use a custom font, add the font-family property to your CSS style. Set the value to the font name registered on the client.