I. Overview
When the cell is displayed in "html", some customers need the font displayed in "html" to be adaptive. At present, the following three solutions can be used to meet the current customer needs.
II. Inline style modification scheme
1) Scenario: The "html" content itself is written inline style or there are fewer cells displayed in "html", and the font size between cells does not need to be reused (for example, the fonts of cells "A1" and "A2" displayed in "html" are both "35px") .
2) Method: Mark the font size directly on the "html".
3) Compatibility: The range that the new adaptation is compatible with.
Example:
Raw html:
<div>Hello</div>
Modified html:
<div style="font-size: 35px">Hello</div>
III. Css modification scheme (recommended plan)
1) Scenario: Multiple cell styles are reused or used that are "css" to set the font size.
2) Method: Modify the "css" style.
3) Compatibility: The client browser environment satisfies "Edge>=15", "chrome", "firefox", "safari>=9.1".
Example:
Raw css:
.name {
font-size: 35px;
color: blue;
background-color: red;
}
Modified css:
.name {
font-size: 35px;
font-size: calc(var(--font-scale) * 35px);
color: blue;
background-color: red;
}
IV. Dom Attribute modification scheme
1) Scenario: Multiple cell styles are reused or used that are "css" to set the font size, and the client browser environment does not meet the "css" modification scheme.
2) Method: "css" does not need to be modified, the "dom" attribute needs to be added, and the data-font-scale="1" attribute is set on the "dom" that needs adaptive fonts.
3) Compatibility: The range that the new adaptation is compatible with.
Example:
Raw html:
<div>Hello</div>
Modified html:
<div data-font-scale="1">Hello</div>
