一、前因

接着来。

二、适合阅读的排版

地址: https://github.com/sofish/typo.css/

在head中引用

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/typo.css@2.1.2/typo.min.css">

在需要排版的节点中加入class=“typo"

三、跨平台的字体

地址：https://github.com/zenozeng/fonts.css

jsdelivr中的链接没有用，只能下载后将fonts.css放入自己站点引用。记得改成自己的路径

<link rel="stylesheet" href="/css/icomoon.css" />

需要的字体中加入class=“font-kai”，可选值为：font-hei 、font-kai、font-song、font-fang-song。方法同上一条。

四、鼠标特效

特效这玩意可太多了，找了半天，要么收费，要么侵入太强，要么用的canvas，而我不太会，费了番功夫，没整好，选择换掉。

没成功的地址：http://www.dmaku.com/jquery/1178.html，效果五我可太喜了。

最后找到这个简单粗暴、无感、开源的。好用记得给作者点亮星。

地址：https://github.com/tholman/cursor-effects

我用的是气泡效果，其他效果对应导入js即可。

js中加入下列代码就可以了

// start bubbleCUrsor

function bubbleCursor(options) {
  let hasWrapperEl = options && options.element
  let element = hasWrapperEl || document.body

  let width = window.innerWidth
  let height = window.innerHeight
  let cursor = { x: width / 2, y: width / 2 }
  let particles = []
  let canvas, context

  let canvImages = []

  function init(wrapperEl) {
    canvas = document.createElement("canvas")
    context = canvas.getContext("2d")

    canvas.style.top = "0px"
    canvas.style.left = "0px"
    canvas.style.pointerEvents = "none"

    if (hasWrapperEl) {
      canvas.style.position = "absolute"
      element.appendChild(canvas)
      canvas.width = element.clientWidth
      canvas.height = element.clientHeight
    } else {
      canvas.style.position = "fixed"
      document.body.appendChild(canvas)
      canvas.width = width
      canvas.height = height
    }

    bindEvents()
    loop()
  }

  // Bind events that are needed
  function bindEvents() {
    element.addEventListener("mousemove", onMouseMove)
    element.addEventListener("touchmove", onTouchMove)
    element.addEventListener("touchstart", onTouchMove)
    window.addEventListener("resize", onWindowResize)
  }

  function onWindowResize(e) {
    width = window.innerWidth
    height = window.innerHeight

    if (hasWrapperEl) {
      canvas.width = element.clientWidth
      canvas.height = element.clientHeight
    } else {
      canvas.width = width
      canvas.height = height
    }
  }

  function onTouchMove(e) {
    if (e.touches.length > 0) {
      for (let i = 0; i < e.touches.length; i++) {
        addParticle(
          e.touches[i].clientX,
          e.touches[i].clientY,
          canvImages[Math.floor(Math.random() * canvImages.length)]
        )
      }
    }
  }

  function onMouseMove(e) {
    if (hasWrapperEl) {
      const boundingRect = element.getBoundingClientRect()
      cursor.x = e.clientX - boundingRect.left
      cursor.y = e.clientY - boundingRect.top
    } else {
      cursor.x = e.clientX
      cursor.y = e.clientY
    }

    addParticle(cursor.x, cursor.y)
  }

  function addParticle(x, y, img) {
    particles.push(new Particle(x, y, img))
  }

  function updateParticles() {
    context.clearRect(0, 0, width, height)

    // Update
    for (let i = 0; i < particles.length; i++) {
      particles[i].update(context)
    }

    // Remove dead particles
    for (let i = particles.length - 1; i >= 0; i--) {
      if (particles[i].lifeSpan < 0) {
        particles.splice(i, 1)
      }
    }
  }

  function loop() {
    updateParticles()
    requestAnimationFrame(loop)
  }

  function Particle(x, y, canvasItem) {
    const lifeSpan = Math.floor(Math.random() * 60 + 60)
    this.initialLifeSpan = lifeSpan //
    this.lifeSpan = lifeSpan //ms
    this.velocity = {
      x: (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 10),
      y: -0.4 + Math.random() * -1,
    }
    this.position = { x: x, y: y }
    this.canv = canvasItem

    this.baseDimension = 4

    this.update = function(context) {
      this.position.x += this.velocity.x
      this.position.y += this.velocity.y
      this.velocity.x += ((Math.random() < 0.5 ? -1 : 1) * 2) / 75
      this.velocity.y -= Math.random() / 600
      this.lifeSpan--

      const scale =
        0.2 + (this.initialLifeSpan - this.lifeSpan) / this.initialLifeSpan

      context.fillStyle = "#e6f1f7"
      context.strokeStyle = "#3a92c5"
      context.beginPath()
      context.arc(
        this.position.x - (this.baseDimension / 2) * scale,
        this.position.y - this.baseDimension / 2,
        this.baseDimension * scale,
        0,
        2 * Math.PI
      )

      context.stroke()
      context.fill()

      context.closePath()
    }
  }

  init()
}

new bubbleCursor()

// end bubbleCUrsor

效果：

五、总结

够了够了，今天先美到这。