我在font-weight按鈕元素上遇到了一個奇怪的問題
當我設定font-weight為 400 時，它作業得很好。
但是，如果我嘗試將其設定為 300 或 500，則沒有任何變化。
如果我這樣做font-weight: 600，它只會變得粗體，甚至沒有匯入！
使用!important也無濟于事
我還檢查了樣式沒有被覆寫。
我正在使用Inter字體系列和 React 庫
我的 index.html（在公用檔案夾內）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="favicon.ico?v=2" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Apple notes (not really)"
/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
<title>Apple notes</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
發生錯誤的 JSX（在帶有 class 的按鈕上add-note）：
import React, { useState, useEffect } from "react";
export default function Sidebar() {
return (
<aside className="sidebar">
<div className="sidebar-header">
<button type="button" className="add-note">Add new note</button>
</div>
<div className="sidebar-notes-list">
<div className="note"></div>
<div className="note"></div>
<div className="note"></div>
</div>
</aside>
)
}
CSS：
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Inter, Arial, Helvetica, sans-serif;
}
.add-note {
font-size: 1.2rem;
font-weight: 600;
color: var(--clr-font-light);
background-color: var(--clr-accent-light);
border: none;
border-radius: 5px;
padding: 10px;
width: 100%;
}
.add-note.dark {
background-color: var(--clr-accent-dark);
color: var(--clr-font-dark);
}
uj5u.com熱心網友回復：
我認為問題在于表單元素不會自動繼承字體設定。嘗試在 CSS 檔案中顯式設定：button {font-family: inherit};并在按鈕類上進一步應用所需的字體粗細：.add-note {font-weight: 400};
這也是相關的inputs, textareas。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/527392.html
標籤：htmlcss反应字体
上一篇：懸停特定div時顯示多個div
下一篇：表單的底部影片