跳到主要内容

在网页中引入字体

· 阅读需 1 分钟
1adybug
1adybug
子虚伊人
@font-face {
    font-family: "AlibabaPuHuiTi";
    src: url("./fonts/AlibabaPuHuiTi-3-35-Thin.woff2") format("woff2");
    font-weight: 100;
}

@font-face {
    font-family: "AlibabaPuHuiTi";
    src: url("./fonts/AlibabaPuHuiTi-3-45-Light.woff2") format("woff2");
    font-weight: 200;
}

@font-face {
    font-family: "AlibabaPuHuiTi";
    src: url("./fonts/AlibabaPuHuiTi-3-55-Regular.woff2") format("woff2");
    font-weight: 300;
}

@font-face {
    font-family: "AlibabaPuHuiTi";
    src: url("./fonts/AlibabaPuHuiTi-3-65-Medium.woff2") format("woff2");
    font-weight: 400;
}

@font-face {
    font-family: "AlibabaPuHuiTi";
    src: url("./fonts/AlibabaPuHuiTi-3-75-SemiBold.woff2") format("woff2");
    font-weight: 500;
}

@font-face {
    font-family: "AlibabaPuHuiTi";
    src: url("./fonts/AlibabaPuHuiTi-3-85-Bold.woff2") format("woff2");
    font-weight: 600;
}

@font-face {
    font-family: "AlibabaPuHuiTi";
    src: url("./fonts/AlibabaPuHuiTi-3-95-ExtraBold.woff2") format("woff2");
    font-weight: 700;
}

@font-face {
    font-family: "AlibabaPuHuiTi";
    src: url("./fonts/AlibabaPuHuiTi-3-105-Heavy.woff2") format("woff2");
    font-weight: 800;
}

@font-face {
    font-family: "AlibabaPuHuiTi";
    src: url("./fonts/AlibabaPuHuiTi-3-115-Black.woff2") format("woff2");
    font-weight: 900;
}

处理图片错误

· 阅读需 1 分钟
1adybug
1adybug
子虚伊人

在项目中经常会使用到第三方的图床，这些图床的图片可能会出错，统一处理错误就很有必要：

window.addEventListener(
    "error",
    e => {
        const { target } = e

        // 判断是否是图片元素的错误
        if (!(target instanceof HTMLImageElement)) return

        const url = new URL(target.src)

        // 判断是否是第三方的图片
        if (url.origin === location.origin) return

        // 添加 data-error-image 属性
        target.dataset.errorImage = ""
    },
    true,
)
[data-error-image] {
    position: relative;
}

[data-error-image]::before {
    content: "视图库服务器";
    font-family: "AlibabaPuHuiTi";
    position: absolute;
    width: 100%;
    height: 50%;
    background-color: brown;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

[data-error-image]::after {
    content: "传递图片失败";
    font-family: "AlibabaPuHuiTi";
    position: absolute;
    width: 100%;
    height: 50%;
    background-color: brown;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
提示

即使后续图片加载成功了也不用担心，伪元素会被隐藏

Ant Design 与 Tailwind 的样式冲突问题

· 阅读需 1 分钟
1adybug
1adybug
子虚伊人

参考 Ant Design 官网：样式兼容

Ant Design 的 CSS-in-JS 默认通过 :where 选择器降低 CSS Selector 优先级，以减少用户升级时额外调整自定义样式的成本，不过 :where 语法的兼容性在低版本浏览器比较差。在某些场景下你如果需要支持旧版浏览器（或与 TailwindCSS 优先级冲突），你可以使用 @ant-design/cssinjs 取消默认的降权操作（请注意版本保持与 antd 一致）：

import { FC } from "react"

import { StyleProvider } from "@ant-design/cssinjs"

// `hashPriority` 默认为 `low`，配置为 `high` 后，
// 会移除 `:where` 选择器封装
const App: FC = () => (
    <StyleProvider hashPriority="high">
        <MyApp />
    </StyleProvider>
)

export default App

切换后，样式将从 :where 切换为类选择器：

:where(.css-bAMboO).ant-btn {
}

.css-bAMboO.ant-btn {
    color: #fff;
}

在 html 中实现网址跳转

· 阅读需 2 分钟
1adybug
1adybug
子虚伊人

在 HTML 中实现打开一个文件后直接跳转到另一个网址，你可以使用 <meta> 标签中的 http-equiv 属性来设置自动刷新，并在 content 属性中指定跳转到目标网址的时间间隔。通常，将时间间隔设置为 0 或很小的数值，可以实现几乎立即的跳转效果。

下面是一个示例代码，演示了如何创建一个 HTML 文件，当用户打开这个文件时，会立刻跳转到指定的网址（例如：https://www.example.com）：

<!doctype html>
<html>
    <head>
        <title>页面跳转</title>
        <meta http-equiv="refresh" content="0; url=https://www.example.com" />
    </head>
    <body>
        <p>如果您的浏览器没有自动跳转，请<a href="https://www.example.com">点击这里</a>。</p>
    </body>
</html>

在这个例子中，<meta> 标签的 content 属性包含两个部分：第一部分是跳转之前的等待时间（秒），在这里设置为 0；第二部分是目标网址，即用户将被重定向到的 URL。如果出于某种原因浏览器没有处理自动跳转（虽然这种情况很少见），<body> 部分的文本和链接为用户提供了一个手动跳转的选项。

这种方法适用于各种需要自动重定向用户的场景，如临时页面、已移动的内容提示或简单的 URL 转发

前端招聘要求

· 阅读需 1 分钟
1adybug
1adybug
子虚伊人
  1. 熟悉 JavaScript、HTML 和 CSS，了解近几年的新特性
  2. 熟练使用 Vue3/React，了解底层原理，React 优先
  3. 熟悉使用 TypeScript，了解泛型的使用
  4. 熟悉使用 Node.js，了解 Common Js 和 ES Module 的区别
  5. 熟悉使用 Ant Design/Tailwind 者优先
  6. 熟悉使用 Webpack/Vite 者优先
  7. 熟悉使用 Github 者优先

在 linux 中安装 nvm

· 阅读需 1 分钟
1adybug
1adybug
子虚伊人

由于国内的网络环境限制，直接安装 nvm 脚本会失败：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

此时可以使用国内的 gitee 镜像源：https://gitee.com/mirrors/nvm

git clone https://gitee.com/mirrors/nvm
cd nvm
bash install.sh