在 WordPress 博客上添加可选择的阅读障碍字体

Question

我现在正在看的东西 - 我最近开了一个博客，我想要的是用户可以选择 select 一种阅读困难的字体来覆盖当前的网站上的字体。

有谁知道是否有适合这个的插件？或者是否可以通过编码实现？我还没有研究编码方面 - 而是专注于插件方面，但到目前为止没有任何进展。

Answer 1

还有 https://dyslexiefont.com/en/typeface/ 它有字体包和一个 chrome 扩展，您可能会发现它很适合您的 child。

Answer 2

如果您希望博客用户能够切换 on/off 像 opendyslexic 这样的 dyslexia-focused 字体，这当然是可能的。您可以使用正文 class 或主容器 class 来更改页面上的所有内容。您可以有一个按钮来更新 CSS 以切换字体，但您还需要为用户设置一个 cookie，以便在页面加载时，一个函数可以检查 cookie 并设置用户所需的字体.

仅供参考，如果您运行此代码段将不起作用，因为您不能像代码段那样在沙盒环境中设置 cookie，但它应该让您了解您需要做什么。

var Cookie = {
  set: function(name, value, days) {
    var expires = "";
    if (days) {
      var date = new Date();
      date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
      expires = "; expires=" + date.toGMTString();
    }
    document.cookie = name + "=" + value + expires + "; path=/";
  },
  get: function(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(";");
    for (var i = 0; i < ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0) == " ") c = c.substring(1, c.length);
      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
  },
  erase: function(name) {
    Cookie.set(name, "", -1);
  }
};

function loadFont() {
  let cookie = Cookie.get("dyslexic");
  if (cookie) {
    document.getElementById("content").classList.add("dyslexic");
  }
}

document.getElementById("fontToggle").addEventListener("click", function() {
  // Toggle font class
  document.getElementById("content").classList.toggle("dyslexic");

  // Set/erase cookie
  if (Cookie.get("dyslexic")) {
    Cookie.erase("dyslexic");
  } else {
    Cookie.set("dyslexic", true, 365);
  }
});

body {
  margin: 0;
  padding: 0;
  position: relative;
  overflow-y: hidden;
}

#nav {
  height: 40px;
  background-color: #0355a8;
}

#content {
  width: 80%;
  margin: 0 auto;
  font-family: "Arial", sans-serif;
}

#content.dyslexic h1,
#content.dyslexic ul,
#content.dyslexic li,
#content.dyslexic p {
  font-family: "Open-Dyslexic", sans-serif;
}

#fontToggle {
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 0;
  background-color: indianred;
  color: white;
  font-family: "Arial", sans-serif;
  padding: 10px;
  border-radius: 5px 0 0 5px;
  text-align: center;
}

<body onload="loadFont()">
  <div id="nav"></div>
  <div id="content">
    <h1>Heading</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ex ipsum, consequat vitae pretium eu, lacinia vitae sem. Sed ante metus, euismod a tincidunt sit amet, facilisis ac purus. Aliquam interdum pulvinar eleifend. Donec maximus libero in diam
      ornare, nec pretium ante iaculis. Ut lacinia nibh vitae lectus elementum, nec eleifend magna posuere. Maecenas vulputate convallis urna a feugiat. Nullam aliquam hendrerit commodo.</p>
    <p>Aenean rutrum odio sed pulvinar tincidunt. Vivamus quis felis mollis, placerat nunc ultricies, vestibulum neque. In hac habitasse platea dictumst. Vivamus nisi ipsum, porttitor vitae justo eget, vehicula rhoncus dolor. Morbi malesuada metus quis nisi
      vulputate rutrum. Nulla vitae mi sed libero rutrum imperdiet. Fusce vitae sem quis massa facilisis dictum.</p>
    <p>Duis nec efficitur metus. Nulla sollicitudin lacinia est non ultrices. Vestibulum auctor, est ac dignissim commodo, nisi nulla convallis metus, nec elementum arcu tortor sed turpis. Mauris pellentesque cursus lorem ut cursus. Vestibulum egestas pulvinar
      fermentum. Aliquam sagittis imperdiet lorem in vestibulum. Phasellus non arcu interdum, dictum mauris eu, luctus ipsum. Cras bibendum aliquet urna, nec laoreet velit eleifend sit amet. In sed metus tempor, lacinia purus ut, aliquam dolor. Phasellus
      turpis mauris, convallis vitae porttitor et, elementum vel nunc. Aliquam vitae ex consectetur, egestas massa euismod, rutrum dolor.</p>
    <p>Sed iaculis leo vitae quam posuere porttitor. Suspendisse placerat viverra dui egestas varius. Aenean sed turpis ornare, finibus dolor in, placerat dolor. Sed mattis hendrerit mi, sed vulputate justo luctus sed. Vivamus venenatis, velit vel facilisis
      pulvinar, nibh lorem fringilla neque, malesuada tincidunt libero felis eget justo. Praesent bibendum consequat arcu, at eleifend nunc interdum ut. Ut aliquam, erat in bibendum eleifend, dui nisi viverra velit, vel tincidunt felis nibh quis ex. Aenean
      at tristique eros. Donec tellus purus, pretium nec fringilla vel, consectetur non quam. Donec ornare urna ut tellus accumsan, id tristique nisi ullamcorper.</p>
    <p>Suspendisse et felis sed quam pretium mattis. Cras suscipit molestie consequat. Sed finibus, augue ac tempor laoreet, metus nisl sodales augue, ut mattis metus felis non justo. Ut a aliquam ipsum, bibendum porta neque. Proin sed finibus erat. Nam
      at euismod urna. Mauris sed cursus quam, eu imperdiet orci. Proin sagittis molestie dui, a congue velit interdum aliquam. Nulla laoreet, est nec efficitur cursus, metus lectus facilisis libero, vel varius velit justo a tortor. Pellentesque feugiat
      dolor sed nulla consectetur luctus.</p>
  </div>
  <div id="fontToggle">Toggle</br>Font</div>
</body>

在 WordPress 博客上添加可选择的阅读障碍字体

Adding selectable dyslexic font on WordPress blog

wordpress

fonts

accessibility

font-face