如何控制html中的字体的宽度

如果你一定要单纯改变宽度，传统的CSS属性是没办法实现的，可以借助CSS3的变形功能来实现，但是是针对标签进行整体变化，而不是单纯针对字体（由于外部标签发生变形，内部元素一同发生变化，算是曲线救国吧），比如：

<style>

    .change {

        width: 200px

        transform: scaleX(1.2)

    }

</style>

<div class="change">整个div宽度会被放大1.2倍</div>

在HTML当中，能够使用CSS当中的font-size控制字体大小（字体宽度会随着字体大小而改变），但是没有能够不管高度而只改变字体宽度的属性。

对于文字和文字之间的间距可以使用word-spacing进行控制

首先说放大缩小字体，直接用js调整字体大小就可以了。

要实现刷新后依然显示之前缩放的大小，那就需要让浏览器记住之前的设置，把字体大小存到cookies中，打开网页再从cookies读取。

给你一段写好的供参考，先引入jquery.cookie.js

var myContent = $('#intro, .article-content, .article-content p')

var fSize = parseInt($.cookie("fontSize") ? $.cookie("fontSize") : parseFloat(myContent.css('fontSize'), 10))

var cDomain = document.location.hostname.match(/[a-z0-9][a-z0-9\-]+\.[a-z\.]{2,6}$/i)

var options = {

path: '/',

domain: cDomain,

expires: 30

}

if(fSize){

myContent.css({'font-size': fSize + 'px'})

$.cookie("fontSize", fSize, options)

}

btnFont.click(function(){

$(this).addClass('on').siblings().removeClass('on')

var cID = $(this).attr("id")

if(cID=="btn-font-plus"){

if(fSize>=20) return

fSize += 2

}else if(cID=="btn-font-reduce"){

if(fSize<=12) return

fSize -= 2

}

myContent.css({fontSize: fSize})

$.cookie("fontSize", fSize, options)

})

具体使用方法请参考cookie文档

---