CSS如何解决谷歌浏览器最小字体为12px,

html-css020

CSS如何解决谷歌浏览器最小字体为12px,,第1张

既然最小支持到12px,那么就以12px为基点进行缩放,即可以使用到 css3里的一个属性:transform:scale(n),n为放大倍数。

这个属性前给-webkit-谷歌前缀,那么就可以控制字体的大小,代码如下:

<style>

p{font-size:10px-webkit-transform:scale(0.8)}

/*这里的数字0.8,是缩放比例,可以根据情况变化。*/

</style>

<p>中梦测试10px</p>

效果图:

你好:谷歌字体cdn加速操作方法如下:

在google fonts 官网上选择字体并获取css链接,如下

<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

将链接内容下载到本地保存,打开,内容如下:

/* latin */@font-face {font-family: 'Oswald'font-style: normalfont-weight: 400src: local('Oswald Regular'),local('Oswald-Regular'),url(https://fonts.gstatic.com/s/oswald/v10/pEobIV_lL25TKBpqVI_a2w.woff2) format('woff2')unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000}/* 如下可能还有更多代码,但结构是和上面的一样的 */

将 @font-face 下 src属性下 url 处的文件下载到本地并保存,并将 url 地址修改成本地地址

引用修改后的本地google fonts css文件,就可以使用了。

作者:高潮

链接:http://www.zhihu.com/question/20587762/answer/18962764

来源:知乎

著作权归作者所有,转载请联系作者获得授权。

步骤一:翻墙后,正常挑选字体,然后获取代码,我举例来说,比如

<link href='http://fonts.googleapis.com/css?family=Kavoon' rel='stylesheet' type='text/css'>

步骤二:在IE浏览器中(很重要)直接访问地址可以得到css文件:

@font-face {

font-family: 'Kavoon'

font-style: normal

font-weight: 400

src: url(http://themes.googleusercontent.com/static/fonts/kavoon/v1/lk6q1-fY9gR9RCI_NBJrgA.eot)

src: local('Kavoon Regular'), local('Kavoon-Regular'), url(http://themes.googleusercontent.com/static/fonts/kavoon/v1/lk6q1-fY9gR9RCI_NBJrgA.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/kavoon/v1/ussWlV5djHtZoUnSGGeN3g.woff) format('woff')

}

可以看到,有eot/woff两个文件。

步骤三:将他们下载并上传到你的服务器,然后修改css代码中的字体地址,再保存css并调用它就可以了。

但是还没完呢!为什么我提到要用IE打开呢?因为访问的地址是可以根据浏览器来判断、加载不同css以加载不同格式的字体,如果你用opera打开:

@font-face {

font-family: 'Kavoon'

font-style: normal

font-weight: 400

src: local('Kavoon Regular'), local('Kavoon-Regular'), url(http://themes.googleusercontent.com/static/fonts/kavoon/v1/PMzOnY7AcdtckHTJS0S3dQ.ttf) format('truetype')

}

比较一下,src的内容是不同的。前面提供的是eot和woff,这儿是ttf。

于是,按照步骤三的方法,把ttf文件也同样操作,并在刚才的css文件中加入它。

最后得到的是:

@font-face {

font-family: 'Kavoon'

font-style: normal

font-weight: 400

src: url(http://example.com/font/a.eot)

src: local('Kavoon Regular'), local('Kavoon-Regular'), url(http://example.com/font/a.eot) format('embedded-opentype'), url(http://example.com/font/a.woff) format('woff')

src: local('Kavoon Regular'), local('Kavoon-Regular'), url(http://src: local('Kavoon Regular'), local('Kavoon-Regular'), url(http://example.com/font/a.ttf) format('truetype').ttf) format('truetype')

}

希望可以帮助你,欢迎采纳