如何为JavaScript输出的交付日期文本设置Avenir粗体白色样式？

你的代码已经能正常计算并显示交付日期，只需要把文本包裹在带样式的HTML元素里，就能实现Avenir字体、粗体、白色的效果。直接修改document.write的内容，给文本加上内联样式即可：

<script>
    // 设置交付天数
    const deliveryDays = 21; // 可根据需要修改这个数字

    // 计算交付日期（今天 + 交付天数）
    const deliveryDate = new Date();
    deliveryDate.setDate(deliveryDate.getDate() + deliveryDays);

    // 格式化日期为「December 5, 2024」格式
    const options = { year: 'numeric', month: 'long', day: 'numeric' };
    const formattedDate = deliveryDate.toLocaleDateString('en-US', options);

    // 带样式显示消息
    document.write(`<span style="font-family: 'Avenir', sans-serif; font-weight: bold; color: white;">Order today and have your custom table cover handcrafted by ${formattedDate}!</span>`);
</script>

关键改动说明： #

• 用<span>标签包裹文本，通过style属性直接设置样式：
  • font-family: 'Avenir', sans-serif：指定字体为Avenir，若用户系统未安装该字体，会自动 fallback 到系统默认无衬线字体
  • font-weight: bold：设置文字为粗体
  • color: white：设置文字颜色为白色

如果需要更灵活地控制文本位置（避免document.write可能导致的页面内容覆盖问题），可以先在网站头部HTML中预留一个容器，再用JS插入内容：

第一步：在头部HTML中添加容器

<div id="delivery-notice"></div>

第二步：修改JS代码插入带样式的内容

<script>
    const deliveryDays = 21;
    const deliveryDate = new Date();
    deliveryDate.setDate(deliveryDate.getDate() + deliveryDays);
    const options = { year: 'numeric', month: 'long', day: 'numeric' };
    const formattedDate = deliveryDate.toLocaleDateString('en-US', options);
    const noticeText = `Order today and have your custom table cover handcrafted by ${formattedDate}!`;

    // 找到预留容器并插入内容
    const noticeElement = document.getElementById('delivery-notice');
    if (noticeElement) {
        noticeElement.innerHTML = `<span style="font-family: 'Avenir', sans-serif; font-weight: bold; color: white;">${noticeText}</span>`;
    }
</script>

这种方式更符合现代前端开发的规范，也能精准控制文本显示的位置。

内容的提问来源于stack exchange，提问作者Phil Vaive