Design

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

目前為 2023-12-27 提交的版本,檢視 最新版本

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==UserScript==
// @name         Design 
// @license MIT
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Change webpage font to Google Sans Text and set font size to 25px, also change heading font
// @match        *://*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

// Create the progress bar element and style it
const progressBar = document.createElement("div");
progressBar.style.position = "fixed";
progressBar.style.bottom = "0"; // Change 'top' to 'bottom'
progressBar.style.left = "0";
progressBar.style.width = "0";
progressBar.style.zIndex = "9999"; // Adjust this value as needed
progressBar.style.height = "2.5px";
progressBar.style.backgroundColor = "red";
progressBar.style.transition = "width 0.1s ease-out";

document.body.appendChild(progressBar);

// Update progress bar on scroll
window.addEventListener("scroll", () => {
    const scrollableHeight = document.documentElement.scrollHeight - window.innerHeight;
    const scrollProgress = (window.scrollY / scrollableHeight) * 100;
    progressBar.style.width = scrollProgress + "%";

    // Change color from red to blue based on progress
    const color = `rgb(${250 - scrollProgress * 2.55}, 0, ${scrollProgress * 9.55})`;
    progressBar.style.backgroundColor = color;
});

    // Hide the footer element (change 'footer' to the actual element or class name)
    const footer = document.querySelector("footer"); // Change 'footer' to the selector for your footer
    if (footer) {
        footer.style.display = "none";
    }
})();


(function() {
    'use strict';

    // Add font-face style to the page for the main content font
    const mainFontStyle = document.createElement('style');
    mainFontStyle.textContent = `
        @font-face {
            font-family: 'Google Sans Text';
            font-style: normal;
            font-weight: 400;
            font-display: swap;
            src: local('Google Sans Text'), local('Google-Sans-Text'),
            url(https://fonts.gstatic.com/s/googlesanstext/v16/5aUu9-KzpRiLCAt4Unrc-xIKmCU5qEp2iw.woff2) format('woff2');
        }
        body {
            font-family: 'Google Sans Text', sans-serif !important;
            
        }
    `;

    // Add font-face style to the page for headings
    const headingFontStyle = document.createElement('style');
    headingFontStyle.textContent = `
        @font-face {
            font-family: 'Google Sans Text';
            font-style: normal;
            font-weight: 700;
            font-display: swap;
            src: local('Google Sans Text'), local('Google-Sans-Text'),
            url(https://fonts.gstatic.com/s/googlesanstext/v16/5aUp9-KzpRiLCAt4Unrc-xIKmCU5oPFTnmhjtg.woff2) format('woff2');
        }
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Google Sans Text', sans-serif !important;
        }
    `;

    // Append both styles to the document
    document.head.appendChild(mainFontStyle);
    document.head.appendChild(headingFontStyle);
})();