Unfortunately, CSS alone cannot achieve this task.

The percentage specified is based on the computed font-size of the containing parent element.

You can find more information about this at http://www.w3.org/TR/CSS2/fonts.html#font-size-props

If you're looking for a jQuery solution, check out this thread: Auto-size dynamic text to fill fixed size container

While researching for a project at work, I came across tnt-rox's response, which was informative. However, I couldn't help but notice some unnecessary overhead that could be eliminated.

document.body.setScaledFont = function(){
    this.style.fontSize = (this.offsetWidth*0.35)+'%';
    return this;
}
document.body.setScaledFont();

If the goal is to enhance performance, removing the excess code can lead to faster execution, especially when incorporated into an onresize event.

To resize the font within a specific element, you can follow a similar approach like this:

window.onload = function(){
    var scaledFont = function(el){
            if(el.style !== undefined){
                el.style.fontSize = (el.offsetWidth*0.35)+'%';
            }
            return el;
        }
        navs = document.querySelectorAll('.container>nav'),
        i;
    window.onresize = function(){
        for(i in navs){
            scaledFont(navs[i]);
        }
    };
    window.onresize();
};

Upon reviewing nicolaas' answer, I noticed some redundancies. I refined it to improve efficiency. Personally, I prefer avoiding while loops and gradual size adjustments for performance reasons.

function setPageHeaderFontSize(selector) {
    var $ = jQuery;
    $(selector).each(function(i, el) {
        var text = $(el).text();
        if(text.length) {
            var span = $("<span>").css({
                    visibility: 'hidden',
                    width: '100%',
                    position: 'absolute',
                    'line-height': '300px',
                    top: 0,
                    left: 0,
                    overflow: 'visible',
                    display: 'table-cell'
                }).text(text),
                height = 301,
                fontSize = 200;
            $(el).append(span);
            while(height > 300 && fontSize > 10) {
                height = span.css("font-size", fontSize).height();
                fontSize--;
            }
            span.remove();
            $(el).css("font-size", fontSize+"px");
        }
    });
}
setPageHeaderFontSize("#MyDiv");

Here's an updated version of my earlier code using jquery.

$(function(){
    var scaledFont = function(el){
            if(el.style !== undefined){
                el.style.fontSize = (el.offsetWidth*0.35)+'%';
            }
            return el;
        };
    $(window).resize(function(){
        $('.container>nav').each(scaledFont);
    }).resize();
});

Although it's a bit delayed, here is my approach to solving this issue:

function adjustPageFont() {
    var factor = 0.35;
    var screenWidth = document.body.offsetWidth;
    var newFontSize = screenWidth * factor;
    document.body.style.fontSize = newFontSize + '%';
    return document.body;
}
adjustPageFont();

The main document font size has been successfully adjusted.

Make sure to set the font sizes for all other elements in your DOM using percentages or ems for consistent scaling.

Check out this solution using MooTools:

Element.implement("resizeText", function() {
                var el = this.getParent();
                var maxWidth = el.getSize().x;
                var maxHeight = el.getSize().y;
                console.log(maxWidth);
                var sizeX = this.getSize().x;
                var sizeY = this.getSize().y;
                if (sizeY <= maxHeight && sizeX <= maxWidth)
                    return;

                var fontSize = this.getStyle("font-size").toInt();
                while( (sizeX > maxWidth || sizeY  > maxHeight) && fontSize > 4 ) {
                    fontSize -= .5;
                    this.setStyle("font-size", fontSize + "px");
                    sizeX = this.getSize().x;
                    sizeY = this.getSize().y;
                }
                return this;
            });

            $$("div").resizeText();

Presented here is an alternative jQuery method ...

/**
 * Adjusts the font size of the page header to ensure text fits within its container.
 * By inserting a hidden span element inside the header, 
 * placing the text inside it, and continuously decreasing the font size
 * until the height of the span surpasses the desired line-height (indicating multiple lines are required).
 */
function adjustPageHeaderFontSize(selectorString) {
    jQuery(selectorString).each(
        function(i, el) {
            var text = jQuery(el).text();
            var length = text.length;
            if(length) {
                var id = "LengthCheckElement_" + i;
                jQuery(el).append("<span style='visibility: hidden; width: 100%; position: absolute; line-height: 300px; top: 0; left: 0; overflow: visible; display: table-cell;' id='"+id+"'>"+text+"</span>");
                var innerEl = jQuery("#"+id);
                var height = 301;
                var fontSize = 200;
                while(height > 300 && fontSize > 10) {
                    height = jQuery(innerEl).css("font-size", fontSize).height();
                    fontSize--;
                }
                jQuery(innerEl).remove();
                jQuery(el).css("font-size", fontSize+"px");
            }
        }
    );
}

//You can execute it like so... by providing any valid jQuery selector string (e.g. h1.pageHeaders will work fine). 
adjustPageHeaderFontSize("#MyDiv");

If you're looking to determine the height of your text, here is a straightforward method using only JavaScript. This script allows you to customize the height of your text according to your preferences.

function calculateTextHeight(text, fontSize) {
    let lineCount = 0;
    let formattedText = text;
    
    for(let i = 0; i < formattedText.length; i++){
        if(formattedText[i] === '<'){
            try{
                if(formattedText[i + 1] === 'b' && formattedText[i + 2] === 'r' && formattedText[i + 3] === '>'){
                    lineCount++;
                }
            }
            catch(err){
                break;
            }
        }
    }
    
    return (lineCount + 1) * fontSize;
}