<apex:outputText Not considering css being applied?

Question

i have a visualforce page where i need to display some rich text fields, and i found some CSS that makes the font resize based on the display widht of the device. This works perfectly with a normal text, but once i use the tag <apex:outputText this doesn't work anymore. Do you guys know how to apply it to apex:outputtext?

For me it would be ok to have another tag that lets me show rich text and apply CSS to it, not necessarily apex:outputtext, but it seems to be the only one who works with rich text fields.

<apex:page standardController="Account" showHeader="false" sidebar="false" >
        <apex:slds /> 
 <style>
font-size: calc(3vw + 3vh);

</style>
<div class="resizeme">
  <svg
    width="100%"
    height="100%"
    viewBox="0 0 500 75"
    preserveAspectRatio="xMinYMid meet"
    style="background-color:green"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
  >
         <text
          x="0"
          y="75"
          font-size="16"
          fill="black"
        ><apex:outputText escape="false" value="{!Account.Text__c}"  ></apex:outputText></text>
      </svg>
    
</div>

</apex:page>

Edit : As you see here on the iPad version the text with the red border is as i want, taking the whole widht and using the CSS. The text below instead is using the apexoutput tag and it's resizing and wrapping between the 2 pictures, the second one is the phone view.

Answer 1

I Made it work in the end by using the tag : apex:outputField But this works only if you want to print a field value, not a string.