Menu
I'm trying to use Myriad Pro as my primary font with Arial and such as a fall-back like so:
font: 13px "Myriad Pro", "Helvetica", "Arial", "sans-serif";
I want to change the font-size when Arial or Helvetica are selected. This is what I have in jQuery but it does not work:
$(function(){
if ($("body").css("font") == "Arial") {
$("body").css("font", "10px");
};
});
I appreciate your time, help and generosity :)
238
To change the font size in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <p> tag, with the CSS property font-size. HTML5 do not support the <font> tag, so the CSS style is used to add font size.
To change the font family of a HTML Element using JavaScript, get reference to the element, and assign required font family value to the element. style. fontFamily property. In the following example, we will change the font family of HTML Element with id "myElement" to "monospace" , in JavaScript, using element.
For most font-relative units (such as em and ex ), the font size is relative to the parent element's font size. For font-relative units that are root-based (such as rem ), the font size is relative to the size of the font used by the <html> (root) element.
To change font type purely with HTML, use the CSS font-family property. Set it to the value you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a paragraph, heading, button, or span tag.
JavaScript doesn't have an officially supported way of detecting fonts, but this library is a decent workaround: http://www.lalit.org/lab/javascript-css-font-detect
Using this detector, you can then use:
$(function(){
var fontDetector = new Detector();
if(fontDetector.test('Arial')){
$('body').css('font-size', '10px');
}
});
Also note that you should only change the font-size property. If you change the font property, you overwrite both your font size and your font families.
99
Everything I've read on this page so far terrifies me! I'm concerned about flickering text sizes, strange browser behavior, misalignment all over the place due to race conditions with other sizing of elements based on sizes.
The underlying problem is that different fonts have different sizes even for the same point size - so you need to understand how different fonts behave to see if they're within acceptable tolerances.
i came up with the followig quick and dirty font tester. Just stick it at the top of your webpage inside the <BODY> tag and click a font name to switch to that font. Test it on Mac + PC + iPad and whichever browsers you need to support. Just remove the fonts from your font list that dramatically break your design.
Remember if you have portions of your page that are more critical, try using Arial for those sections.
<ul id="fontList" style="position:absolute; top: 500px; color: red">
<li>Segoe UI Medium</li>
<li>Segoe UI</li>
<li>Trebuchet MS</li>
<li>Trebuchet</li>
<li>Lucida Grande</li>
<li>Tahoma</li>
<li>Arial</li>
<li>Sans-Serif</li>
</ul>
<script>
$('#fontList li').assertNonEmpty().click(function () {
$('body').css('font-family', $(this).html());
});
</script>
Test it out on JSFiddle.com <-- click on the red font names in the bottom right box
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
