如何用css样式设计整个网站字体

2 02 2 年，我接了一个网站设计项目，客户非要网页上所有文字都弄成宋体，我当时也懵，怎么做到呢？后来我查了资料，发现只要在样式表中把body的字体设置为宋体就行了。
body{font-family:"宋体"}，就这么简单。
但是，如果只是网页的一部分需要宋体，那就要对那部分的层进行设置，比如：.part-of-page{font-family:"宋体"}。

默认字体嘛，常见的有宋体、楷体、黑体、新宋体、仿宋这些，用起来挺方便的。
不过，客户有时候对字体有特别的要求，这时候就需要用到外部字体了。

外部字体，听起来高大上，其实就是把字体文件放在网页上，让浏览器去加载。
我用了@font-face语法，这个语法有点复杂，得这样写：@font-face{font-family:name;src:;sRules;}。
其中，font-family是自定义字体的名称，src指定字体文件的地址，sRules是样式表定义。

举个例子，我给一个字体起名叫YH，然后从服务器上找到.ttf文件，路径是www.xxx/xxx.ttf，写法就是：@font-face{font-family:YH;src:url(www.xxx/xxx.ttf);}。
设置好之后，再在body样式里把字体设置为YH，body{font-family:YH}，这样整个网页的文字就都变成了YH字体。

这个过程有点繁琐，但是客户满意就好。
后来想想，可能我偏激了，其实设计嘛，就是要满足客户的需求，字体设置只是其中的一小部分。

利用Dreamweaver设置CSS字体和文本样式

说实话，我当年用Dreamweaver的时候，对CSS设计器这玩意儿真是又爱又恨。
爱的是它真能省事儿，恨的是有时候自动生成的代码跟屎一样难读。
不过话说回来，它确实让那些CSS小白，像我刚入行那会儿，能快速上手。

先说个具体场景吧。
有一次我接了个活儿，客户要求整个网站字体要统一成那种带点文艺范儿的字体。
说实话，我连那字体叫啥都忘了，直接在Dreamweaver里点开“字体”那块儿，找到“自定义Web字体”，输入字体名，然后它自己生成了一大堆代码，包括那个<link>标签引入Google Fonts的。
这比我手动拷贝CDN链接省了不少事儿，至少不会因为写错字体名导致全站文字乱码。

说到这里不得不提的，就是Dreamweaver的“实时视图”。
你知道这玩意儿有多神不神？你改一行CSS，它立马就在预览窗口里变，不用刷新浏览器。
我经常是改了又改，反复在“实时视图”和代码之间横跳，最后才导出。
当然，它生成的代码可能有点啰嗦，比如用font缩写的地方，它有时候会拆成好几行，这点确实挺烦人的。

再讲个我踩过的坑。
有一回我给一个按钮加动画，直接在Dreamweaver里点“属性”区的那个小动画图标，选了过渡效果。
结果呢？它给我生了一堆@keyframes，代码量比我手动写的还多。
我当时也没想明白为啥要这么复杂，后来才发现是默认开启了“精细动画”模式。
说白了，Dreamweaver在帮你的时候，有时候也像个话痨，给你堆砌一堆你可能用不上的代码。

关于性能优化，我建议初学者先别急着用那些花里胡哨的Web字体。
我记得有一年我做的项目被客户投诉加载慢，一查发现是引入了三个不同字体的CDN。
我直接把两个给删了，改用系统默认的，加载速度立马快了。
当然，如果你做的是设计感特别强的网站，那另说。
但一般情况下，两个Web字体就差不多了，多了真的会拖慢速度。

最后说说响应式设计。
Dreamweaver在这方面做得还行，但有个地方容易让人抓狂。
就是它的断点设置，有时候自动给你生成的媒体查询并不适合。
我记得有一次我把手机屏幕模拟器放大到7 6 8 px，它给我生了个max-width，结果在平板上显示不对。
我只好手动改成了min-width。
这块我没亲自跑过最新版本的Dreamweaver，不知道现在改了没。

总的来说，Dreamweaver的CSS设计器就是个“入门神器”，适合新手快速上手。
但真要做复杂项目，你得知道什么时候该信任它，什么时候该手动改代码。
毕竟，再智能的工具，也得靠人用得明白才行。

css设置网页字体

结论： CSS设置网页字体：
样式：用font-family和font-style，Arial、微软雅黑或sans-serif备选。

大小：font-size，1 6 px固定或em相对，通配符全局设置，慎用。

颜色：color，3 3 3 等HEX，RGB，避免冲突。

实际用：
通用字体优先，适应设备大小，对比度要好。