告诉我网页上的字好看有多重要呗？可直接改变网站给人的感觉，让大家看得更舒服。做网页设计时，我们就借助CSS里的font-family指令来为网页选择合适的字体“款式”。这命令真的很厉害，不论你是用电脑还是手机上网页，只要字体显示无误，那就行！所以，咱们来仔细说说这font-family怎么用，还有跟它有关的字体调节小妙招哟。
1. font-family属性基本介绍
CSS字体
body {
font-family: "Lucida Calligraphy", cursive, serif, sans-serif;
}
font-family 属性
你晓得不？css中的font-family，就是专门用来控制html元素的字体！就酱～
cssCSS字体 body { font-style: oblique; } .normal { font-style: normal; } .italic { font-style: italic; } .oblique { font-style: oblique; } .inherit { font-style: inherit; }normal：显示一个标准的字体
italic：显示一个斜体的字体
oblique：显示一个倾斜的字体
inherit：从父元素继承字体样式
selector {
字体全家桶：value1，value2，…等等。CSS字体 p.weight-100 { font-weight: 100; } p.weight-200 { font-weight: 100; } p.normal { font-weight: normal; } p.bold { font-weight: bold; } p.bolder { font-weight: bolder; }font-weight: 100;
font-weight: 200;
font-weight: normal;
font-weight: bold;
font-weight: bolder;
}
来看看，这个“value1”“value2”就是你挑字体用的！然后，浏览器就会按照你的机器查找字典里对应的字体名字。记住，如果字体名里有空格或者汉字的话，别忘了加个双引号
CSS字体 .xx_small { font-size: xx-small; } .x_small { font-size: x-small; } .small { font-size: x-small; } .medium { font-size: x-small; } .large { font-size: large; } .x-large { font-size: x-large; } .xx-large { font-size: xx-large; } .smaller { font-size: smaller; } .larger { font-size: larger; } .font-20 { font-size: 20px; }将字体大小设置为：xx-small
将字体大小设置为：x-small
将字体大小设置为：x-small
将字体大小设置为：medium
将字体大小设置为：large
将字体大小设置为：x-large
将字体大小设置为：xx-large
将字体大小设置为：smaller
将字体大小设置为：larger
将字体大小设置为 20 像素
2. font-style属性的应用
不光能换字体，还能用font-style给字体加点小变化，像斜过来什么的。常用的就是平时看到的那样、斜体和倾斜这三种。挑选完毕，字体马上就变得有趣起来！
CSS字体 .normal { font-variant: normal } .small { font-variant: small-caps }This is a paragraph
This is a paragraph
3. font-weight属性的设置
字号对吗？别慌，看看字体粗细（font-weight）这个属性就行了。那些我们常见的宋体啦、黑体什么的，都是靠它出来滴～只要调整一下这儿，整个页面就能大变样~
4. font-size属性及关键词取值
font：[[font-style||font-variant||font-weight||font-stretch]?font-size[ /line-height]?font-family] | caption | icon | menu | message-box | small-caption | status-bar选字号就像挑衣服一样，要恰到好处别太大或者太小。想换字号吗？动下手找到那个 font-size 的选项，给你的段落选择最适合的字号。这样，整篇文章看起来会更协调，浏览的时候也更加清晰易懂咯。常用的标注方式主要有颜色+大小（例如 xx-small/x-small），像素数 px，以及相对单位 em。弄明白这几点你就能在升级阅读体验之旅中走得更远！
5. font-variant属性详解
CSS字体 p.info { font: italic bold 12px/30px arial, sans-serif; }使用 font 属性需要遵循以下顺序：
font：[[font-style||font-variant||font-weight||font-stretch]?font-size[ /line-height]?font-family] | caption | icon | menu | message-box | small-caption | status-bar
小写变大写成英文字母，很好玩？只需要把’font-variant’设置成’small-caps’就能搞定。
6.使用font同时定义多个字体效果
想学怎么改字？就这么简单的调调大小，换换颜色你应该能行？告诉你，其实有个神奇小工具名叫“字体属性”，帮你轻松搞定！用起来超级方便，就像这样子啦：赶紧试试看~
@font-face { font-family: ; src: [][, []]*; [font-weight: ]; [font-style: ]; }字体：样式重，大小/行高，家族款式；
/* 定义 @font-face 规则 */ @font-face { /* 指定字体名称 */ font-family: 'Bungee Inline'; font-style: normal; font-weight: 400; /* 指定字体文件的路径 */ src: local('Bungee Inline'), local('BungeeInline-Regular'), url(https://fonts.gstatic.com/s/bungeeinline/v2/Tb-1914q4rFpjT-F66PLCfn8qdNnd5eCmWXua5W-n7c.woff) format('woff'); 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; } /* 字体的应用 */ h2{ font-family: 'Bungee Inline'; }这样就能轻松地设置出文字在各种格式下的效果~
Lecepin's Blog
7. font-size-adjust属性及应用场景
知道，CSS3专门为改变设备和浏览器显示效果差这事儿，发明了个新特性——font-size-adjust。它就好比是个神奇的标尺，能控制网页上文字的大小，保证无论在哪种设备上都看着美美的，字体大小还都一致。而且，用这种方式调整字体，视觉感受也会更好，简直是神器！
8.不同格式字体文件及浏览器支持情况
哈喽，建站需不需要用外挂字体？视具体情况来决定。像.woff和.svg那类的，虽然各家浏览器喜好不同，选个符合咱们项目需求的字体，美观又稳妥！
记住这几个关于字体家族和设置的简单方法，让你的网页或项目看起来更美，读者也会觉得很舒服！
。
评论0