提交 a5acf8c5 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬

feat(css): font-family

上级 31412dd1
<template>
<view style="flex-grow: 1;">
<view style="height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<text class="common" style="font-family: monospace;">font-family: monospace</text>
<text class="common" style="font-family: cursive;">font-family: cursive</text>
<text class="common" style="font-family: AlimamaDaoLiTi;">font-family: 阿里妈妈刀隶体(网络字体下载后生效)</text>
</view>
</view>
</template>
<script>
export default {
onLoad() {
// 加载网络字体
uni.loadFontFace({
global: false,
source: "https://native-res.dcloud.net.cn/uni-app-x/static/font/AlimamaDaoLiTi.ttf",
family: "AlimamaDaoLiTi",
success(res) {
console.log(JSON.stringify(res));
},
fail(err) {
console.error(JSON.stringify(err));
}
});
}
}
</script>
<style>
.common {
font-size: 20px;
line-height: 40px;
}
</style>
\ No newline at end of file
<template>
<view>
<text class="common" style="font-family: monospace"
>font-family: monospace</text
>
<text class="common" style="font-family: cursive"
>font-family: cursive</text
>
<text class="common" style="font-family: AlimamaDaoLiTiTTF"
>font-family: 阿里妈妈刀隶体-ttf(网络字体下载后生效)</text
>
<!-- <text class="common" style="font-family: AlimamaDaoLiTiOTF"
>font-family: 阿里妈妈刀隶体-otf</text
>
<text class="common" style="font-family: AlimamaDaoLiTiWOFF"
>font-family: 阿里妈妈刀隶体-woff</text
>
<text class="common" style="font-family: AlimamaDaoLiTiWOFF2"
>font-family: 阿里妈妈刀隶体-woff2</text
> -->
</view>
</template>
<style>
.common {
font-size: 20px;
line-height: 40px;
}
@font-face {
font-family: AlimamaDaoLiTiTTF;
src: url('https://native-res.dcloud.net.cn/uni-app-x/static/font/AlimamaDaoLiTi.ttf');
}
/* @font-face {
font-family: AlimamaDaoLiTiOTF;
src: url('/static/font/AlimamaDaoLiTi.otf');
}
@font-face {
font-family: AlimamaDaoLiTiWOFF;
src: url('/static/font/AlimamaDaoLiTi.woff');
}
@font-face {
font-family: AlimamaDaoLiTiWOFF2;
src: url('/static/font/AlimamaDaoLiTi.woff2');
} */
</style>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册