本文关键词：dw做网站字体 别人电脑显示
做网站十五年，我见过太多新手被“字体显示”这个问题折磨得想砸键盘。你在DW里看着好好的宋体、黑体，怎么一发布到网上，到了别人的电脑上，要么变回丑陋的默认宋体，要么干脆就是方块乱码？这种落差感，真的让人火大！今天我不讲那些虚头巴脑的理论，直接上干货，解决这个让你头疼的顽疾。
首先，你要明白一个残酷的真相：别人的电脑里，不一定有你用的字体。你在本地开发时，用的是Windows自带的微软雅黑或者思源黑体，但客户用的是Mac，或者更老旧的系统，甚至是用手机访问，这些设备里根本没有你的字体文件。这就是为什么“dw做网站字体 别人电脑显示”会出现差异的根本原因。
很多小白喜欢直接在CSS里写font-family: 'MyCustomFont';，然后满心欢喜地上传代码，结果发现毫无卵用。这是因为浏览器不会自动去下载这个字体，除非你做了特殊处理。
别急，咱们一步步来，按照下面这个方法操作，保证你的字体在所有设备上都能稳稳当当显示。
第一步：确认字体版权。这点至关重要！别随便去网上下载个免费字体就商用，小心律师函寄到家。去字由、方正或者Adobe Fonts找那些明确允许Web使用的字体。如果你只是个人学习，随便用，但要是给客户做项目，一定要买授权或者用开源字体，比如思源黑体、Noto Sans，这些是安全的。
第二步：将字体文件转换为Web格式。现在的浏览器对WOFF2格式支持最好，体积小且加载快。你需要把.ttf或.otf文件转换成.woff2。网上有很多在线转换工具，搜“字体转woff2”一大把。转换好后，你会得到几个不同后缀的文件，别慌，我们主要用woff2。
第三步：在DW里编写CSS代码。这是核心环节。打开你的样式表，先定义字体：
@font-face {
font-family: 'MyWebFont';
src: url('fonts/MyWebFont.woff2') format('woff2'),
url('fonts/MyWebFont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
注意看，这里用了两个src，是为了兼容老一点的浏览器。然后，在你的body或者h1标签里应用这个字体：
body {
font-family: 'MyWebFont', 'Microsoft YaHei', sans-serif;
}
这里的'Microsoft YaHei'是后备字体，如果自定义字体加载失败，至少还能显示个好看的雅黑，而不是丑陋的宋体。
第四步：测试与优化。很多兄弟做到这一步就觉得完了，大错特错！一定要用Chrome浏览器的开发者工具，模拟不同网络环境（比如Slow 3G）看看字体加载速度。如果字体太大，页面加载慢，用户体验极差。这时候，你可以考虑使用Google Fonts或者国内的字体CDN服务，比如字蛛（Font-spider），它能帮你自动裁剪字体文件中不需要的字符，大幅减小文件体积。
我见过太多同行，为了省那点服务器流量，直接上传几MB的字体文件，结果用户打开网页要转圈半天，骂声一片。这就是缺乏经验的表现。
另外，还有一个小细节，就是字体的行高和字间距。自定义字体往往和默认字体在视觉重心上有差异，适当调整line-height和letter-spacing，能让排版更舒服。别嫌麻烦，细节决定成败。
最后，我想说，做网站不是搭积木，每个细节都关乎用户体验。当别人抱怨你的网站字体显示不正常时，你不仅能快速解决，还能解释清楚原理，这才是专业度。别等到客户投诉了才手忙脚乱。
如果你还在为“dw做网站字体 别人电脑显示”的问题发愁，或者搞不定字体转换和CSS配置，别硬撑。你可以直接来找我聊聊，我帮你看看代码，或者给你推荐几个靠谱的字体源。毕竟，我也曾踩过这些坑，不想让你再走弯路。有问题随时留言，看到必回！
