你的位置： &
> 网页字体怎么变大？网页字体设置变大方法
网页字体怎么变大？网页字体设置变大方法
更新时间：
收藏本页（Ctrl+D）
手机扫描查看
扫描二维码
网页字体该怎么变大呢?下面小编就以IE浏览器来演示一下
首先打开IE浏览器，你会看到右下角的100%，这个就是当前浏览器字体显示的大小
如果要变大的话就按住CTRL键，然后转动鼠标中轮，就会发现网页文字会变大或缩小，调到适当大小就可以了。
【上一篇】
【下一篇】
看完这篇文章有何感觉？
(您的评论需要经过审核才能显示,请文明发言！)&&剩余字数：
点击图片更换
统一文章资讯频道声明
1、 所有来源标注为统一下载站或统一文章的内容版权均为本站所有，若您需要引用、转载，请注明来源及原文链接即可，如涉及大面积转载，请来信告知，获取授权。
2、 本站所提供的文章资讯等内容均为作者提供、网友推荐、互联网整理而来，仅供学习参考，如有侵犯您的版权，请及时联系我们，并提供原文出处等，本站将在三个工作日内修正。
3、 若您的网站或机构从本站获取的一切资源进行商业使用，除来源为本站的资料需与本站协商外，其他资源请自行联系版权所有人。
4、 未经统一下载站允许，不得盗链、盗用本站资源；不得复制或仿造本网站，不得在非统一下载站所属的服务器上建立镜像，统一下载站对其自行开发的或和他人共同开发的所有内容、技术手段和服务拥有全部知识产权，任何人不得侵害或破坏，也不得擅自使用。
文章教程分类
本站资源均收集整理于互联网，其著作权归原作者所有，如果有侵犯您权利的资源，请来信告知，我们将及时撤销相应资源。
Copy . All Rights Reserved.在网页中插入特殊字体,浅谈@font-face - 简书
下载简书移动应用
写了46714字，被18人关注，获得了11个喜欢
在网页中插入特殊字体,浅谈@font-face
摘要：本篇文章包括（1）介绍@font-face（2）如何在网页中使用@font-face插入特殊字体（3）中文在线@font-face——有字库（4）修改hexo主题字体
自从在hexo上安装了pacmen主题之后，就一直对pacman主题header上的textlogo和footer上intro_line的字体很感兴趣，因为我的电脑和手机上并没有安装该字体，但是无论是在任何终端上，浏览的体验都是一致的，然后查找了一些资料，发现这是CSS3中的一个功能模块@font-face，主要用于实现网页字体多样性。
@font-face功能
制作网站难免有些字体不是默认的，通过@font-face可以加载自己特定的字体，来实现特定的文字效果。@font-face语句是css中的一个功能模块，用于实现网页字体多样性(设计者可随意指定字体，不需要考虑浏览者电脑上是否安装)。主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体，@font-face 不能说他是什么新东西了，在 CSS2.0 规范中就有了这玩意儿，IE4.0 开始就已经出现，只是当时用的不是特别广泛，后来在 CSS2.1 草案中又被删掉。随着 web 的急速发展，@font-face 价值越来越凸显，然后再次被纳入 CSS3 草案中。@font-face 是个什么东西，本文不做过多说明，不太清楚的童鞋可以看这里
@font-face文件
而由于网页中使用的字体类型，也是各浏览器对字体类型有不同的支持规格。 字体格式类型主要有几个大分类：TrueType、Embedded Open Type 、OpenType、WOFF 、SVG。
Windows和Mac系统最常用的字体格式，其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体，这使得它们比基于矢量的字体更容易处理，保证了屏幕与打印输出的一致性。同时，这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。
EOT– Embedded Open Type (.eot)
EOT是嵌入式字体，是微软开发的技术。允许OpenType字体用@font-face嵌入到网页并下载至浏览器渲染，存储在临时安装文件夹下。
OpenType(.otf)
OpenType是微软和Adobe共同开发的字体，微软的IE浏览器全部采用这种字体。致力于替代TrueType字体。
WOFF–WebOpen Font Format (.woff)
WOFF（Web开发字体格式）是一种专门为了Web而设计的字体格式标准，实际上是对于TrueType/OpenType等字体格式的封装，每个字体文件中含有字体以及针对字体的元数据（Metadata），字体文件被压缩，以便于网络传输。
SVG(Scalable Vector Graphics) Fonts (.svg)
SVG是由W3C制定的开放标准的图形格式。SVG字体就是使用SVG技术来呈现字体，还有一种gzip压缩格式的SVG字体。
@font-face声明字体
由于每种浏览器对@font-face的兼容性不同，不同的浏览器对字体的支持格式不同，这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持。
仅支持 Embedded OpenType(.eot) 格式。
Firefox 3.5
支持 TrueType、OpenType(.ttf, .otf) 格式。
Firefox 3.6
支持 TrueType、OpenType(.ttf, .otf) 及 WOFF 格式。
Chrome,Safari,Opera
支持 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。
为了使@font-face达到更多的浏览器支持，Paul Irish写了一个独特的@font-face语法叫Bulletproof @font-face:
@font-face {
font-family: 'YourWebFontName';
src: url('YourWebFontName.eot?') format('eot');/*IE*/
src:url('YourWebFontName.woff') format('woff'), url('YourWebFontName.ttf') format('truetype');/*non-IE*/
但为了让各多的浏览器支持，你也可以写成：
@font-face {
font-family: 'YourWebFontName';
src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
url('YourWebFontName.ttf')
format('truetype'), /* Safari, Android, iOS */
url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
使用@font-face实现网页中插入特殊字体的过程
获取特殊字体
这里我们要用到的是Single Malta字体
Single Malta
要得到Single Malta字体，不外乎两种途径，其一找到付费网站购买字体，其二就是到免费网站DownLoad字体。当然要给钱的这种傻事我想大家都不会做的，那我们就得到免费的地方下载，在哪有呢？我平时都是到Google Web Fonts和寻找自己需要的字体，当然网上也还有别的下载字体的地方，这个Demo使用的是的Single Malta字体，这样就可以到这里下载Single Malta：
获取@font-face所需字体格式
由于不同浏览器支持的字体文件不同，我们需要想办法获得@font-face所需的.eot,.woff,.ttf,.svg字体格式，这里我们用到了一个网站fontsquirrel，可以方便的帮助我们实现字体格式的转换
fontsquirrel
进入网站后点击Add Fonts按钮，上传我们刚刚下载好的字体文件（要先把SingleMalta.ttf从.zip压缩包中解压出来），通常选择中间默认的OPTIMAL选项即可，然后勾选Agreement,点击DOWNLOAD YOU KIT，稍等片刻，即可下载我们所需要的字体文件。解压压缩包包可以看到已经转换好的字体文件，如下图：
大家可以看到，解压缩出来的文件格式，里面除了@font-face所需要的字体格式外，还带有一个DEMO文件，如果你不清楚的也可以参考下载下来的DEMO文件，我在这里不对DEMO说明问题，我主要是给大家介绍如何把下载下来的文件有价值的运用到我们的项目中。
应用@font-face到我们的项目中
这里我们新建一个DOME项目，目录包括一个fonts文件夹，里面存放的转换好的字体文件；一个css文件夹，用于存放ccs文件；和一个index.html入口文件。目录和html如下
style.css代码
@font-face {
font-family: 'SingleMaltaRegular';
src: url('../fonts/singlemalta-webfont.eot');
src: url('../fonts/singlemalta-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/singlemalta-webfont.woff') format('woff'),
url('../fonts/singlemalta-webfont.ttf') format('truetype'),
url('../fonts/singlemalta-webfont.svg#SingleMaltaRegular') format('svg');
font-weight:
font-style:
h1.SingleMalta{
font-family: 'SingleMaltaRegular';
background-color: rgb(123,234,234);
上传到服务器，效果如下
更改hexo的textlog字体
pacman的字体资源是储存在pacman主题文件夹下source/font之中的，关于@font-face声明是储存在source/css/_base/font.styl配置文件之中，查看pacman的配置文件_config.yml找到字体选项Font通过注释可以了解到，页面的字体配置是保存在source/css/_base/variable.styl之中，如下图所示
首先将解压出来的.eot,.woff,.ttf,.svg字体文件放入font文件夹中，找到source/css/_base/font.styl配置文件，可以看到pacman已经帮我们建立了一个通用的声明，所以我们无需修改声明，只需要在variable.styl中修改页面字体配置即可，将font-custom-family``font-custom-filename改成我们的字体名和文件名即可
font-custom-family = "SingleMaltaRegular"（随意）
font-custom-filename = singlemalta-webfont
刷新页面即可看到效果，如下图：
中文@font-face
上面的这些@font-face转换网站都不支持中文字体的转换，中文字体文件相对于英文显得过于庞大，很长一段时间都被认为是不适合嵌入网页的。
直到几年前，这个问题终于被一个日本网站解决了，他用的技术就是截取法，在前端置入一个js脚本，脚本自动根据网页内容适时生成一个小字库（只包含当前网页内容的小字库）然后自动转换成.ttf、.eot、.woff、.svg等格式嵌入网页中，从页实现@font-face效果。体验和英文@font-face差不多，效果非常漂亮。但日文@font-face网站对于中文网页还无法支持。
如果是你想在你的网页上使用中文简体@font-face服务，也不是不可能，推荐一个中文@font-face网站——“有字库”。
使用时，只需要引用一段js脚本代码或者一段css代码，网站就会自动帮你截取网页需要的小字库并生成.ttf、.eot、.woff、.svg等格式文件，你可以将各文件下载下来，也可以托管在这个网站上，非常方便。去试试吧
有字库测试
&title&font test&/title&
&meta http-equiv="content-type" charset="utf-8"
content="text/html"
&h1 class="SiYuanRegular"&中国文字之美&/h1&
&p class="SiYuanRegular"&思源黑体测试&/p&
&h1 &中国文字之美&/h1&
&p &思源黑体测试&/p&
//有字库生成的JS脚本插入&/body&和&/html&之间
&script type="text/javascript" src="/UserDownFile/jquery.min.js"&&/script&
&script type="text/javascript" src="/UserDownFile/jquery.md5.js"&&/script&
&script type="text/javascript"&
function youziku46827() {
var resultStr = $(".SiYuanRegular").text();
var md5 = "";
resultStr = Trim(resultStr);
resultStr = SelectWord(resultStr);
md5 = $.md5("08d5ae7dc2ef0"+"SiYuanRegular" + resultStr);
$.getJSON("/webfont/CSSPOST?jsoncallback=?", { "id": md5, "guid": "08d5ae7dc2ef0", "type": "5" }, function (json) {
if (json.result == 0) {/*alert("需要生成");*/
$.post("/webfont/PostCorsCreateFont", { "name": "SiYuanRegular", "gid": "08d5ae7dc2ef0", "type": "5", "text": resultStr }, function (json) {
if (json == "0") { /*alert("参数不对");*/
} else if (json == "2") {/*alert("超过每日生成字体数的上限");*/
} else if (json == "3") { /*alert("当前正在生成请稍后");*/
} else {/*alert("正在生成");*/
else {/*alert("下载css文件");*/
loadExtentFile("/webfont/css?id=" + md5 + "&guid=" + "08d5ae7dc2ef0" + "&type=5");
(function youziku() {
if (window.location.href.toString().substring(0, 7) == "file://") {
alert("你当前是通过双击打开html文件，进行本地测试的，这样看不到字体效果，一定要通过本地建立的虚拟网站或发布到外网进行测试。详见有字库的使用说明。");
youziku46827();
有字库测试
打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮您当前所在位置： >
> Web后端开发
CSS网页布局中默认字体的方法
欢迎大家在这里学习CSS网页布局中默认字体!下面是我们给大家整理出来的精彩内容。希望大家在这里学习!
样式优先级
通常用户看到的页面的样式会受到三层控制:
第一层是浏览器的默认样式
第二层是网页定义样式
第三层是用户自定义样式
和CSS一样，后面的优先级 高于前面的，也就是说网页定义样式可以覆盖浏览器的默认样式，而用户自定义样式优先级最高。不过，当有 !important 时，网页样式可以覆盖用户自定义样式。用户!important & 网页!important & 用户 & 网页 & 浏览器默认。
字体：arial
我们页面的绝大部分内容字符都是中文，毫无疑问目前为止在网页上最常用也是最通用的显示中文的字体是宋体，但是宋体在显示英文、数字和英文符号时过于糟糕，比如&字符，所以我们一般期望通过CSS来实现用更好的字体样式来显示它们，然后用宋体来显示中文和中文符号。之所以选择arial是因为：
Windows和Mac都预装了这款字体，应该是使用最广泛的网页字体了。它的潜在对手tahoma和helvetica就没有这么幸运了。
视觉设计的专业人士可能会认为在Windows中使用tahoma、在Mac中使用helvetica更好，比如淘宝的默认字体样式是font: 12px/1 Tahoma, Helvetica, Arial, &\5b8b\4f53&, sans-
这是一个很不错的选择，但是你也会发现Google、YAHOO、Youtube、Bing甚至MSN的新版都使用arial作为第一默认字体。所以从美观和可读性上来讲arial应该是完全可以接受的。
一般情况下设置font-family都会在最后设置通用字体族以保证其安全性，比如Google的设置为font-family:arial,sans-，但是至少在非中文版的Win7下当编码是GBK时，IE8会因sans-serif来渲染宋体，导致字体出现变形，这就是为什么淘宝需要在sans-serif前加上宋体而Google无需这样做的原因。
因为中文字体的选择非常有限，所以目前所有的主流浏览器都设置使用宋体来显示中文。Baidu的首页和搜索结果页使用font-family:可以从侧面说明这样做的安全性。可能有人注意到Firefox中国版默认显示的中文字体是微软雅黑，这是因为谋智网络擅自修改了用户自定义样式，不允许网页的样式覆盖浏览器设置的样式。也是由于类似的情况，我们要弹性设计网页非常重要。
使用英文字体作为第一默认字体会导致的问题之一就是中英文以及符号混排时的对齐问题、通过设置行高和hasLayout能解决绝大部分情况，但是都不会很完美，如果把字体改成&宋体&能彻底的解决问题。很明显，这个问题只出现在IE上。所以，如果你的网站很少使用英文、数字和英文符号，那么直接设置{font-family:\5b8b\4f53;}也是很合理的选择。
大小：12px
12px是宋体能显示的极限，虽然微软雅黑能显示更小的字体，但目前的应用环境尚未成熟。由于宋体基本上是目前显示中文唯一的通用Web字体，所以12px成为最常用的字体大小。我们当然可以依据产品的需要来修改这个默认值。
不用考虑基于字体大小(em)的设计。
在Chrome3.0之后的中文版中，字体大小最小值是12px，比如你设置最小字体为10px，最后也变成12px。
行高：1.5倍
这是一个经验值，不同的产品对这个值要求可能不同，但我们一般会设置最常用的为默认值。比如YUI的font中是font:13px/1.231 arial,helvetica,clean,sans-即字体大小默认值是13px，行高是13*1.231=16.003px，默认的行高是默认字体的1.231倍。对于中文来说，常用的字体大小12px、14px、16px、18px等偶数大小，在IE6和IE7设置其行高也为偶数能解决一些特殊情况下的字体对其问题。
在IE6和IE7中，行高值必须大于字体的2px才能保证字体的完整显示或当其作为链接时能有效显示下划线。
设置line-height时，注意不要使用单位(包括%在内)，因为子节点会继承经过运算后的line-height值，所以当使用单位后浏览器会把line-height计算成第一次定义的绝对值，而不会随着字体大小的变化而变化，而无单位的数值表示是所在容器的font-size的倍数，所以设置为无单位的数值是最佳选择。
深入CSS 行高非常有利于理解line-height，值得一读。
性能和效率
大部分平台都有arial，减少浏览器的查找时间。
代码最少，书写方便。arial基本上是名字最短的字体了，可以节约CSS的大小。
所有的字母都小写，目前Google就是这样做的，好处是既可以编写更快也能提升Gzip压缩的效率。
中文最好用unicode表示，比如使用宋体是{font-family:\5b8b\4f53;}，使用微软雅黑是{font-family:\5fae\8f6f\96c5\9ed1;}，这样的好处是避免编码问题，同时能得到所有的主流浏览器的支持。
使用正确的字体种类写法，避免使用引号，这样可以缩小CSS的大小。中文字体可以按上一条方式来编写。
通过对中英文及符号混排的测试， 我发现微软雅黑其实表现相当不错，包括英文数字和英文字符以及在IE6和IE7的显示效果上，但唯一的遗憾是在XP下如果安装了微软雅黑字体的用户没有打 开&使用屏幕字体的边缘平滑&选项的话，在firefox、Safari和Opera、特别是IE6下会非常模糊难以辨认。针对这个问题目前并没有很好的 解决方案，所以只有等到IE6使用比率非常小的时候才可能正式的使用它。或许需要到2014年，XP死掉的时候。
虽然很早就有了@font-face，但是浏览器的支持、网速和商业问题，导致它很少被应用。最近关于字体的好消息是Firefox3.6将支持Web Open Font Forma。关于Web字体未来的相关信息可以看Web 字体的未来、关于 Web 字体：现状与未来和再谈 Web 字体的现状与未来。
好了，CSS网页布局中默认字体内容就给大家介绍到这里了。希望大家继续关注我们的网站!
相关推荐：
频道热门推荐
栏目最新更新}