☰

Design

Change webpage font to Google Sans Text and set font size to 25px, also change heading font

当前为 2023-12-27 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Design 
  3. // @license MIT
  4. // @namespace    http://tampermonkey.net/
  5. // @version      0.1
  6. // @description  Change webpage font to Google Sans Text and set font size to 25px, also change heading font
  7. // @match        *://*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14. // Create the progress bar element and style it
  15. const progressBar = document.createElement("div");
  16. progressBar.style.position = "fixed";
  17. progressBar.style.bottom = "0"; // Change 'top' to 'bottom'
  18. progressBar.style.left = "0";
  19. progressBar.style.width = "0";
  20. progressBar.style.zIndex = "9999"; // Adjust this value as needed
  21. progressBar.style.height = "2.5px";
  22. progressBar.style.backgroundColor = "red";
  23. progressBar.style.transition = "width 0.1s ease-out";
  24.  
  25. document.body.appendChild(progressBar);
  26.  
  27. // Update progress bar on scroll
  28. window.addEventListener("scroll", () => {
  29.     const scrollableHeight = document.documentElement.scrollHeight - window.innerHeight;
  30.     const scrollProgress = (window.scrollY / scrollableHeight) * 100;
  31.     progressBar.style.width = scrollProgress + "%";
  32.  
  33.     // Change color from red to blue based on progress
  34.     const color = `rgb(${250 - scrollProgress * 2.55}, 0, ${scrollProgress * 9.55})`;
  35.     progressBar.style.backgroundColor = color;
  36. });
  37.  
  38.     // Hide the footer element (change 'footer' to the actual element or class name)
  39.     const footer = document.querySelector("footer"); // Change 'footer' to the selector for your footer
  40.     if (footer) {
  41.         footer.style.display = "none";
  42.     }
  43. })();
  44.  
  45.  
  46. (function() {
  47.     'use strict';
  48.  
  49.     // Add font-face style to the page for the main content font
  50.     const mainFontStyle = document.createElement('style');
  51.     mainFontStyle.textContent = `
  52.         @font-face {
  53.             font-family: 'Google Sans Text';
  54.             font-style: normal;
  55.             font-weight: 400;
  56.             font-display: swap;
  57.             src: local('Google Sans Text'), local('Google-Sans-Text'),
  58.             url(https://fonts.gstatic.com/s/googlesanstext/v16/5aUu9-KzpRiLCAt4Unrc-xIKmCU5qEp2iw.woff2) format('woff2');
  59.         }
  60.         body {
  61.             font-family: 'Google Sans Text', sans-serif !important;
  62.             
  63.         }
  64.     `;
  65.  
  66.     // Add font-face style to the page for headings
  67.     const headingFontStyle = document.createElement('style');
  68.     headingFontStyle.textContent = `
  69.         @font-face {
  70.             font-family: 'Google Sans Text';
  71.             font-style: normal;
  72.             font-weight: 700;
  73.             font-display: swap;
  74.             src: local('Google Sans Text'), local('Google-Sans-Text'),
  75.             url(https://fonts.gstatic.com/s/googlesanstext/v16/5aUp9-KzpRiLCAt4Unrc-xIKmCU5oPFTnmhjtg.woff2) format('woff2');
  76.         }
  77.         h1, h2, h3, h4, h5, h6 {
  78.             font-family: 'Google Sans Text', sans-serif !important;
  79.         }
  80.     `;
  81.  
  82.     // Append both styles to the document
  83.     document.head.appendChild(mainFontStyle);
  84.     document.head.appendChild(headingFontStyle);
  85. })();
  86.  
  87.