历史版本2 :决策报表单元格以HTML展示 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

当单元格为以html展示时,部分客户需要html展示的字体也是自适应的,目前可采用以下三种解决方案,来满足当前客户需求。

2. 内联样式修改方案编辑

1)场景:html内容本身就是写的内联样式或者以html展示的单元格较少,且单元格之间字体大小不需要复用(复用指的是比如以html展示的单元格A1和A2字体都是35px)

2)方式:直接在html上标注字体大小

3)兼容性:新自适应所兼容的范围

示例:

# 原始html
<div>Hello</div>

# 修改后
<div style="font-size: 35px">Hello</div>

3. Css修改方案(推荐方案)编辑

1)场景:多个单元格样式复用或采用的是css设置字体大小

2)方式:修改css样式

3)兼容性:客户浏览器环境满足Edge>=15、chrome、firefox、safari>=9.1

示例:

# 原始css
.name {
    font-size: 35px;
    color: blue;
    background-color: red;
}
 
# 修改后
.name {
    font-size: 35px;
    font-size: calc(var(--font-scale) * 35px);
    color: blue;
    background-color: red;
}

4.Dom Attribute修改方案编辑

1)场景:多个单元格样式复用或采用的是css设置字体大小,且客户浏览器环境不满足Css修改方案

2)方式:css不用修改,需要增加dom属性,在需要自适应字体的dom上设置data-font-scale="1"这个属性

3)兼容性:新自适应所兼容的范围

示例:

# 原始html
<div>Hello</div>

# 修改后
<div data-font-scale="1">Hello</div>