Change text-font size of whole page content

Asked
Active3 hr before
Viewed126 times

5 Answers

contentchange
90%

You can use rem, which is better than em in some places because em cascades and rem does not.,With all lengths are specified in rem, you can adjust the sizes by change the font-size of the <html> element., How can I generate the same random number in Mathematica and MATLAB? , Very handy tip! Shame it requires IE9 plus, because ems can be both a blessing and a curse. I'll probably use rem from now on if I don't care about older IEs. – Christian May 9 '13 at 12:06

You can change the font of a element and its children recursively to "force" it all to change:

function changeFont(element) {
   element.setAttribute("style", element.getAttribute("style") + ";font-family: Courier New");
   for (var i = 0; i < element.children.length; i++) {
      changeFont(element.children[i]);
   }
}
changeFont(document.getElementsByTagName("body")[0]);

Alternatively you can use the style atribute of the element as object:

function changeFont(element) {
   element.style.fontFamily = "Courier New";
   for (var i = 0; i < element.children.length; i++) {
      changeFont(element.children[i]);
   }
}
changeFont(document.getElementsByTagName("body")[0]);
load more v
88%

In HTML, you can change the size of text with the <font> tag using the size attribute. The size attribute specifies how large a font will be displayed in either relative or absolute terms. Close the <font> tag with </font> to return to a normal text size. ,The default font size is 3, and the largest font size that can be displayed in a browser is 7.,For examples of how the different font sizes look, visit W3Schools' HTML <font> Tag Example., This is document abai in the Knowledge Base. Last modified on 2021-09-08 10:19:52.

To increase or decrease the size of the font relative to the default size, use <font size="+num"> or <font size="-num"> , where "num" is a number. For example, to make the text two sizes bigger, use:

  <font size="+2">This is bigger text.</font>
load more v
72%

The font-size CSS property sets the size of the font. Changing the font size also updates the sizes of the font size-relative <length> units, such as em, ex, and so forth.,Keywords are a good way to set the size of fonts on the web. By setting a keyword font size on the <body> element, you can set relative font-sizing everywhere else on the page, giving you the ability to easily scale the font up or down on the entire page accordingly.,As one of the absolute-size or relative-size keywords,As a <length> or a <percentage>, relative to the element's font size.

/* <absolute-size> values */
   font-size: xx-small;
   font-size: x-small;
   font-size: small;
   font-size: medium;
   font-size: large;
   font-size: x-large;
   font-size: xx-large;
   font-size: xxx-large;

   /* <relative-size> values */
      font-size: smaller;
      font-size: larger;

      /* <length> values */
         font-size: 12px;
         font-size: 0.8em;

         /* <percentage> values */
            font-size: 80%;

            /* Global values */
            font-size: inherit;
            font-size: initial;
            font-size: revert;
            font-size: unset;
load more v
65%

how to change font size within the same paragraph,how to change font size in HTML how to change font size within the same paragraph ,   <h2>How to Change Font Size Within the Same Paragraph [Inline CSS]</h2>,   <h2>How to Change Font Size Within the Same Paragraph [Internal CSS]</h2>

 <font face="Arial" size="20px" color="#FF7A59">Your text here.</font>
load more v
75%

I was wondering what code is used to enhance or decrease webpage content font size? Ideally I would like to add 3 different text size icons giving the user an option to decrease, default or enlarge font size which is something that seems to be on quite a few sites. Can anyone suggest any sites that provide tutorials or scripts on this?,I don’t have your code, but I’m going to assume that you would like to change the font size of your content through a button onclick event. Here is the code:,wouldn’t that lead to too many accidental font changes? wouldn’t a click event be a better route seeing as how the user would have more preferential control over the page? And also couldn’t you use your option as an alternative if JavaScript were to be disabled?,I’m not saying that you’re idea is wrong. I was just a little skeptical on how it would really be presented on a web page. So what you are trying to say is that you would assign a class to lets say a ‘div’ element through CSS and when hovered through the pseudo hover it would change the font size of the page, kind of like a mouseover effect.

I don’t have your code, but I’m going to assume that you would like to change the font size of your content through a button onclick event. Here is the code:

<html>
<head>
</head>
<body>

<p id = "content">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>

<input type = "button" value = "small" id = "small"/> <input type = "button" value = "normal" id = "normal"/> <input type = "button" value = "Large" id = "large"/>
<script>
var content = document.getElementById("content");
var smallButton = document.getElementById("small");
var normalButton = document.getElementById("normal");
var largeButton = document.getElementById("large");
smallButton.onclick = function(e){
content.style.fontSize = "10px";	
}
normalButton.onclick = function(e){
content.style.fontSize = "14px";	
}
largeButton.onclick = function(e){
content.style.fontSize = "20px";	
}


</script>
</body>
</html>

Other "content-change" queries related to "Change text-font size of whole page content"