僅將字體大小應用於某些子元素

Question

我有一個項目（一個 label 制造商），我需要定義一個字體大小，然后以百分比將所需大小應用於文本元素。

這按預期工作，但是當我將字體大小設置為父 div（包含文本、圖像、條形碼......）時，所有圖像都會以我設置的像素為單位獲得字體大小的偏移量。

由於我將生成 PDF，因此我的文本的字體大小作為 int 存儲在我的數據庫中，並將用作 pt（點類型）。 為此，我將父 div 的字體大小設置為其高度，並將子元素的字體大小設置為百分比。

基本上我正在這樣做：

<div id='template' style="font-size: (labelHeight) + px">
    <div id='text' style="font-size: {{100*(field.fontSize*0.352778)/field.template.format.height }}%">
        <p>My text</p>
    </div>
    <div>
        <img id='myImage'>
    </div>
</div>

這是我的代碼的簡化（這里的語法不正確，只是為了向您展示它是如何工作的）。

我將field.template.format.height存儲在mm中，並將fontSize存儲為int 。 0.352778值來自1pt = 0.352778mm的事實。

基本上我希望我的模板div 的 fontSize 僅適用於文本元素。

Answer 1

font-size屬性指定文本的大小。 如果模板div中的其他元素受到它的影響，是否有可能使用與字體大小成正比的em單位指定它們的大小/填充/邊距。 我建議改用rem單位，因為它們與全局字體大小成正比，因此不受模板div字體大小變化的影響。

Answer 2

如果父 div 有一個字體大小，它的孩子將繼承它。 要解決此問題，您應該一一指定

例如<p style="style ETC"></p>