Is it possible to dynamically scale text size based on browser width?
Here is the project this is for: http://phlak.github.com/jColorClock/. As you can see, right now the text size is just set to a static size. I'd like the text to always be ~90% of the width of the window 开发者_如何学Cbut to also scale the vertical size accordingly. Is there a relatively easy way of doing this?
Hell yeah!
Set your <body> font size when the window is resized with a little javascript. (I've used jQuery for convenience here:
$( document ).ready( function() {
var $body = $('body'); //Cache this for performance
var setBodyScale = function() {
var scaleSource = $body.width(),
scaleFactor = 0.35,
maxScale = 600,
minScale = 30; //Tweak these values to taste
var fontSize = scaleSource * scaleFactor; //Multiply the width of the body by the scaling factor:
if (fontSize > maxScale) fontSize = maxScale;
if (fontSize < minScale) fontSize = minScale; //Enforce the minimum and maximums
$('body').css('font-size', fontSize + '%');
}
$(window).resize(function(){
setBodyScale();
});
//Fire it when the page first loads:
setBodyScale();
});
Because your font size is set in em's (perfect) adjusting the percentage font-size of the body element acts as a universal 'text zoom'. This will scale any text set in em's - if you want to be more specific, you could set the percentage font-size on a <div> that surrounds just the elements you want to scale.
Here's a quick example: http://www.spookandpuff.com/examples/dynamicTextSize.html
New units were added in CSS3 that will allow you to do this. Sitepoint has a good overview. You definitely want to provide a fallback for older browsers, but this is by far the simplest solution:
font-size: 35vmin;
Another option for when you don't need as much precision (say, a couple sizes for different devices) is to use media queries.
Same as Beejamin's excellent answer, with a couple tweaks.
The math was adjusted so that you can set the "default width" at which no scaling will occur. This makes it easier to design to a given width with exact font-sizes.
The font-size is now set on the html element freeing up the body element to hold a font-size in the css.
$(function() {
// At this width, no scaling occurs. Above/below will scale appropriately.
var defaultWidth = 1280;
// This controls how fast the font-size scales. If 1, will scale at the same
// rate as the window (i.e. when the window is 50% of the default width, the
// font-size will be scaled 50%). If I want the font to not shrink as rapidly
// when the page gets smaller, I can set this to a smaller number (e.g. at 0.5,
// when the window is 50% of default width, the font-size will be scaled 75%).
var scaleFactor = 0.5;
// choose a maximum and minimum scale factor (e.g. 4 is 400% and 0.5 is 50%)
var maxScale = 4;
var minScale = 0.5;
var $html = $("html");
var setHtmlScale = function() {
var scale = 1 + scaleFactor * ($html.width() - defaultWidth) / defaultWidth;
if (scale > maxScale) {
scale = maxScale;
}
else if (scale < minScale) {
scale = minScale;
}
$html.css('font-size', scale * 100 + '%');
};
$(window).resize(function() {
setHtmlScale();
});
setHtmlScale();
});
If you use jQuery you might want to try FitText. It lets you scale text to the width of the element really easily.
The other option is FlowType.JS which works in a similar way.
- With consistent cross browser compatibility
- Without breaking or disrupting the browser's zoom accessibility.
- Without altering style attributes.
- without blurring fonts.
- Without browser sniffing.
- Works on OSX maximize and restore.
- With callbacks to detect browser's zoom level.
Try Mimetic.js
加载中,请稍侯......
精彩评论