我单独开发的h5页面，项目中引入了思源宋体的字体包
body{margin:0; padding:0;}
div,dl,dt,dd,ul,ol,li,p,span,h2,h3,h4,h5{margin:0; padding:0;}
ul,ol{list-style:none;}
img{border:0;margin: 0;}
body{
font-family: 'Source Han Sans SC', sans-serif;
}
@font-face {
font-family: 'Source Han Sans SC'; / 为字体指定一个名称 /
src: url('../font/SourceHanSerifCN-Regular.ttf') format(opentype);
font-weight: normal; / 字体粗细 /
font-style: normal; / 字体样式 /
}
.btn{
width: 100%;
height: 0.46rem;
background: #37BEB3;
border-radius: 0.06rem;
outline: none;
color: #fff;
font-size: 0.18rem;
border: 0;
}
5 个回复
DCloud_UNI_yuhe
你好能详细说明一下你的问题吗？最好是提供附带的示例项目，这样能够更好帮助你解决问题
q***@gmail.com (作者)
我单独开发的h5页面，项目中引入了思源宋体的字体包
body{margin:0; padding:0;}
div,dl,dt,dd,ul,ol,li,p,span,h2,h3,h4,h5{margin:0; padding:0;}
ul,ol{list-style:none;}
img{border:0;margin: 0;}
body{
font-family: 'Source Han Sans SC', sans-serif;
}
@font-face {
font-family: 'Source Han Sans SC'; / 为字体指定一个名称 /
src: url('../font/SourceHanSerifCN-Regular.ttf') format(opentype);
font-weight: normal; / 字体粗细 /
font-style: normal; / 字体样式 /
}
.btn{
width: 100%;
height: 0.46rem;
background: #37BEB3;
border-radius: 0.06rem;
outline: none;
color: #fff;
font-size: 0.18rem;
border: 0;
}
q***@gmail.com (作者)
经过测试发现，用电脑浏览器能正常渲染字体，苹果端的web-view也可以正常渲染字体，安卓端的web-view无法正常渲染字体，在安卓手机自带的浏览器打开页面正常渲染字体。我刚刚更新为ttf格式的文件，安卓端的web-view依然无法正常渲染字体，在安卓手机自带的浏览器打开页面正常渲染字体。
2025-09-11 16:45
DCloud_UNI_yuhe
回复 q***@gmail.com: 可以尝试提供一下一个可以复现的项目看看
2025-09-12 11:02
q***@gmail.com (作者)
在安卓手机链接电脑打开chrome的调试模式之后发现，没有加载font
q***@gmail.com (作者)
苹果手机链接电脑打开Safari的调试模式之后发现，加载了font
暴躁东北虎
应该是路径有问题，我这边用安卓测是能正常显示加载的字体的，不过我的html是放在static测的
q***@gmail.com (作者)
但是安卓和苹果都是一套代码呀，按理来说要是路径问题，苹果和浏览器都会报错的
2025-09-11 18:22