网页使用rem前设置字体

这段代码展示了如何在JavaScript中实现REM布局以适应不同尺寸的移动端屏幕。通过监听窗口的resize事件,动态调整HTML根元素的字体大小,从而实现响应式设计。引入的rem.js文件确保了页面在不同分辨率下保持良好的视觉效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

//rem.js文件
export default (function (doc, win) {
    var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

    recalc = function () {
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        docEl.style.fontSize = 20 * (clientWidth / 1200) + 'px';
        console.log(docEl.style.fontSize)
    };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    // doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
//调用
import rem from './js/rem.js';

document.documentElement.style.fontSize = 20 * (document.documentElement.clientWidth / 1200) + 'px';
rem

<think>嗯,用户想知道如何在HTML和CSS中设置网页字体样式。我需要根据提供的引用内容来整理答案。首先,引用[1]提到了CSS中的字体样式属性,比如font-family、font-size、font-weight等。引用[2]详细说明了font属性的各个子属性,比如font-style、font-variant等,还提到了设置字体颜色的方法。引用[3]给出了中文字体样式的代码示例,比如使用微软雅黑和华文细黑等字体。 首先,我应该分步骤说明设置字体的方法。第一步是设置字体族,用font-family属性,可以列出多个字体作为备选。例如,先写英文字体,再写中文字体,这样兼容性更好。引用[3]中的例子就用了微软雅黑和华文细黑,这部分需要强调。 然后是调整字体大小,用font-size,单位可以用px、em或rem。引用[1]里提到控制字体大小,需要说明不同单位的区别,比如px是固定单位,em相对父元素,rem相对根元素。 接下来是字体粗细,用font-weight,可以设数值或者bold这样的关键词。引用[2]里提到font-weight属性,需要解释常见的数值范围,比如400是正常,700是加粗。 字体样式方面,font-style用于斜体,比如italic或oblique。引用[2]里也提到了这一点,需要举例说明。 字体颜色用color属性,可以用十六进制、RGB或颜色名称。引用[2]中的例子虽然主要讲font属性,但color是单独设置的,需要指出这一点。 综合使用font属性的话,可以简写多个属性,比如font: italic bold 16px/1.5 "Microsoft YaHei", sans-serif; 这样更简洁,但要注意顺序。引用[2]里提到font属性可以一次设置所有字体属性,但要注意语法顺序是否正确。 另外,引用[3]中的代码示例显示了如何设置中文字体,可能需要提醒用户注意中文字体的名称需要用引号包裹,特别是当字体名中有空格时。同时,建议使用Web安全字体或者通过@font-face引入自定义字体,但引用里没提到这点,可能需要补充。 用户可能还关心如何确保字体在不同设备上显示一致,比如使用通用字体族,如sans-serif作为后备。这部分在引用[3]的例子中也有体现,最后的sans-serif就是通用字体族。 总结一下,回答的结构应该是分点讲解每个属性,给出示例代码,并引用对应的引用来源。同时,生成的问题要围绕字体设置的相关知识点,比如性能优化、颜色设置、中文字体选择等。</think>### 如何在HTML/CSS中设置网页字体样式? #### 1. **设置字体族(font-family)** 通过`font-family`属性指定优先级字体列表,确保兼容性。建议先定义英文字体,再定义中文字体,最后用通用字体族(如`sans-serif`)兜底。 ```css body { font-family: "Arial", "Microsoft YaHei", "华文细黑", sans-serif; } ``` 此代码会优先使用Arial(英文字体),若无则尝试微软雅黑或华文细黑,最后用无衬线字体[^3]。 #### 2. **调整字体大小(font-size)** 使用`font-size`控制字号,单位可选`px`(像素)、`em`(相对父元素)、`rem`(相对根元素)。 ```css p { font-size: 16px; /* 固定大小 */ } .title { font-size: 1.5rem; /* 响应式设计常用 */ } ``` #### 3. **控制字体粗细(font-weight)** 通过`font-weight`设置粗细,支持数值(100-900)或关键词(如`bold`)。 ```css .bold-text { font-weight: 700; /* 等效于bold */ } .light-text { font-weight: 300; } ``` #### 4. **设置字体样式(font-style)** 使用`font-style`定义斜体或倾斜文本: ```css .italic { font-style: italic; /* 斜体 */ } .oblique { font-style: oblique; /* 倾斜 */ } ``` #### 5. **定义字体颜色(color)** 通过`color`属性设置颜色,支持十六进制、RGB或颜色名称: ```css .text-red { color: #ff0000; /* 十六进制 */ } .text-blue { color: rgb(0, 0, 255); /* RGB */ } ``` #### 6. **综合简写(font)** 用`font`属性一次性设置多个值,顺序为:`font-style font-weight font-size/line-height font-family`。 ```css .text { font: italic bold 16px/1.5 "Microsoft YaHei", sans-serif; } ``` #### 注意事项: - 中文字体名称需用引号包裹(如`"Microsoft YaHei"`)[^3]。 - 使用Web安全字体(如Arial、Times New Roman)或通过`@font-face`引入自定义字体。 - 通用字体族(如`sans-serif`)确保基础可读性[^1]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值