Jekyll本地与GitHub Pages线上版本字体样式差异及CSS问题咨询

1. Resolving Font Style Differences Between Local and GitHub Pages #

It’s super common to hit styling gaps between local Jekyll builds and GitHub Pages—let’s walk through actionable fixes for your font issues:

• Verify font asset paths: Local builds handle relative paths smoothly, but GitHub Pages needs you to account for your repo’s base URL. Update your CSS font declarations to use Jekyll’s site.baseurl variable to ensure paths work everywhere:

  @font-face {
    font-family: 'YourCustomFont';
    src: url('{{ site.baseurl }}/assets/fonts/your-font.woff2') format('woff2');
    /* Add other font formats as needed */
  }
  

  Double-check that your font files are committed to your GitHub repo (not ignored via .gitignore).

• Fix font loading behavior: Local builds might load fonts faster or use system fallbacks differently. Add font-display: swap to your @font-face rule for consistent fallback behavior, and confirm your font files are optimized (no corrupted files that fail to load on GitHub Pages).

• Debug CSS specificity conflicts: Use your browser’s DevTools (F12) to inspect text elements on both local and live sites. Compare which CSS rules are applied—sometimes GitHub Pages injects theme default styles that override your custom font rules. Boost your selector specificity (e.g., use body .content p instead of just p) or use !important as a last resort (specificity fixes are cleaner, though).

• Clear GitHub Pages cache: GitHub Pages can cache old CSS even after you push updates. Force a rebuild by making a tiny change to _config.yml (like adding a space) and pushing it, or add a version query string to your CSS link in _includes/head.html to bypass caching:

  <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/style.css?v={{ site.time | date: '%Y%m%d%H%M' }}">
  

2. Fixing Auto-Focus to Page Middle on Load #

This issue is almost definitely unrelated to fonts—here are the most likely culprits and fixes:

• Remove unintended autofocus attributes: Scan your HTML for elements (input fields, textareas, buttons) with the autofocus attribute. This tells browsers to automatically scroll to and focus that element on load—remove it if it’s not intentional.

• Check for URL anchor links: If your site’s URL includes an anchor (e.g., https://yourusername.github.io/#section-2), the browser will scroll to that element on load. Fix unintended anchors, or adjust the anchor’s position to the top if needed.

• Debug JavaScript scroll triggers: Look through your custom JS for code that triggers scrolling on page load—like window.scrollTo(), element.scrollIntoView(), or smooth scroll scripts. Comment these lines temporarily to test, then adjust the logic to only run when intended (e.g., on button clicks, not page load).

• Fix layout shifts causing false scrolls: Rarely, late-loading elements that push content down can make it seem like the page is scrolling to the middle. Use DevTools’ Performance tab to record page load and spot layout shifts—fix them by setting explicit heights for dynamic elements or using placeholders.

内容的提问来源于stack exchange，提问作者kingmakerking