css字体样式有哪些

说实话，当年我刚开始搞前端的时候，font-family这玩意儿真是把我绕得头大。
记得第一次接手一个老项目，设计师给的设计稿里字体全靠猜——"这个是那种有点复古的微软雅黑"，"那个要像苹果那种圆体"... 到最后调试的时候才发现，设计师连字体文件都没给，全靠浏览器自己猜。
那时候IE6 的字体回退机制简直是个噩梦，一个字体用不了，整个版面都变样了。

有意思的是font-size的选择。
我之前有个项目，用px的时候突然发现移动端小屏幕上字太小看不清，改用em后父元素嵌套多了又出乱子。
最后发现用rem结合媒体查询效果最好，比如在6 4 0px以下屏幕把body的font-size调整为1 4 px，这样1 .5 rem就等于2 1 px，正好够大。
当然这得提前确定根元素字体大小，不然跟用px一样容易混乱。

关于font-weight，我有个踩坑的教训。
有次用CSS3 的5 00这个值，结果发现不同浏览器渲染差异很大。
后来查资料才知道，规范里5 00对应的是medium（中等），但实现上各家浏览器有自己的粗细标准。
所以现在我一般还是用bold或者具体数值7 00、4 00这种，至少能保证大概效果。
oblique其实用得很少，除了某些特殊艺术字体，平时基本不用。

text-decoration这属性挺有趣的。
我有个活动页面用波浪线强调重点，结果发现老版本的Chrome渲染特别慢，后来改用下划线就好了。
半透明效果现在用得多了，比如用rgba(2 5 5 ,0,0,0.5 )做文章摘要的红色提示，比纯色淡一点但又不至于太刺眼。
记得当年用HSL值调色还经常出问题，现在Chrome早就支持得挺好。

line-height这东西我悟了。
以前总以为1 .5 倍就行，后来发现标题和正文混用容易出bug。
现在我的习惯是正文用1 .5 ，标题用1 .2 或者1 .3 ，具体看字号大小。
有个特别坑的案例是某个合作方网站，他们用em单位，结果某个CSS规则里忘了转成px，导致整个文档行高乱成一锅粥。
那段时间我天天盯着浏览器看字体行距，真是够了。

color这块我就不多说了，不过要注意的是透明度。
之前有个设计稿要求背景色和文字颜色有叠加工效，结果直接用ff0000不透明，文字完全看不清。
改用rgba(2 5 5 ,0,0,0.5 )才对。
还有RGB值记得带括号，RGBA记得带a，别像当初我一样把RGB写成RGB，被同事笑惨了。

最后关于@font-face，这块我踩坑也踩明白了。
有次给客户做定制字体，直接用TTF格式引入，结果发现移动端加载慢得像狗。
后来换WOFF2 格式才搞定。
记得设置font-display: swap;，不然切换时会有个黑框闪一下。
有个项目用Google Fonts，结果发现某个特定分辨率下字体加载失败，最后加了个备用服务器才解决。
这块建议多测试几个浏览器和设备，别像我一样出项目了才发现移动端根本用不了那个字体。

说实话，这些属性单独看都挺简单的，但组合起来调试的时候真的能让人抓狂。
不过熟能生巧，现在改CSS我都能边喝咖啡边盲操作了。

VSCode怎么写CSS样式_VSCode编写CSS代码与实时预览效果教程

直接上结论：
1 . 新建index.和style.css。
HTML里链接CSS：<link rel="stylesheet" href="style.css">。
CSS写基础样式：body{font-family:Arial;background-color:f0f0f0;}.demo{color:blue;padding:1 0px;}。

2 . VSCode内置优化： IntelliSense：写dis，自动提示display:flex。
Emmet缩写：m1 0→margin:1 0px; bd→border:1 px solid; p1 0-2 0→padding:1 0px 2 0px。
格式化：Shift+Alt+F（Windows/Linux）或Shift+Option+F（macOS）。
语法高亮：CSS选择器、属性、值颜色不同。

3 . 实时预览： 安装LiveServer扩展。
启动预览：打开HTML文件，点击GoLive按钮（默认端口5 5 00）。
问题解决： 浏览器不刷新：检查文件保存，LiveServer运行状态（状态栏显示端口）。
CSS不生效：检查HTML链接路径，Ctrl+F5 硬刷新。
端口冲突：改LiveServer默认端口（settings里搜liveServer.settings.port）。

4 . 预处理器支持： 安装LiveSassCompiler扩展。
工作流： HTML链接编译后.css文件。
写.scss文件：支持变量、嵌套、函数。
例： $primary-color:007 bff;.demo{color:darken($primary-color,1 0%);border:1 px solid $primary-color;} 点击WatchSass按钮启动监听，保存.scss后自动生成.css。

5 . 高级配置： SourceMaps：生成.map文件，浏览器调试原始.scss代码。
输出路径：settings里配置liveSassCompile.settings.formats。
错误处理：看输出面板错误信息。

6 . 效率技巧： 并排窗口：VSCode和浏览器分屏。
快捷键：格式化Shift+Alt+F，启动LiveServer GoLive，监听Sass WatchSass。
项目结构：大项目用Webpack/Gulp，中小型LiveSassCompiler够用。

编码-预览同步，开发效率提升。