Tengo un proyecto (un creador de etiquetas) en el que necesito definir un tamaño de fuente y luego aplicar en porcentaje el tamaño deseado a los elementos de texto.
Esto funciona como se esperaba, pero cuando configuro el tamaño de fuente en el div principal (que contiene texto, imágenes, códigos de barras...), todas las imágenes obtienen una compensación del tamaño de fuente en píxeles que configuré.
Dado que generaré un PDF, el tamaño de fuente de mi texto se almacena en mi base de datos como un int y se usará como pt (tipo de punto). Para lograr esto, configuro mi tamaño de fuente del div principal a su altura y configuro el tamaño de fuente de mis elementos secundarios como un porcentaje.
Básicamente estoy haciendo esto:
<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>Esta es una simplificación de mi código (la sintaxis no es correcta aquí, pero es solo para mostrarle cómo funciona).
Guardo mi field.template.format.height en mm y mi fontSize como un int . El valor de 0,352778 proviene del hecho de que 1pt = 0,352778 mm .
Básicamente, quiero que mi tamaño de fuente de mi div de plantilla se aplique solo a los elementos de texto .
La propiedad font-size especifica el tamaño del texto. Si otros elementos dentro de la plantilla div se ven afectados, es posible que su tamaño/relleno/margen se especifique utilizando unidades em , que son proporcionales al tamaño de la fuente. Sugeriría usar unidades rem en su lugar porque son proporcionales al tamaño de fuente global y, por lo tanto, no se ven afectadas por los cambios en el tamaño de fuente de la plantilla div .
si el div padre tiene un tamaño de fuente y el hijo lo heredará. para arreglar este problema debes especificarlo uno por uno
Por ejemplo <p style="style ETC"></p>