关于 font-family:san-serif

博客围绕XHTML验证和CSS字体类别展开。提到XHTML中字体最后须以sans - serif等字体类别结束且不能加引号,还介绍了CSS的font - family中serif、sans - serif、cursive、fantasy、monospace这几个关键字及相关字体示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前些天看到阿捷提到xhtml验证的问题,说明字体最后必须以sans-serif(无衬角字体,简单地理解就是中文的黑体,文字笔划末端结束嘎然而止,而不是拐来拐去)这样的字体类别作为结束。几天又看到这个,这样的字体类型名 不能加引号。前些天,我遇到过这个问题,当时也没仔细看,原来是加引号的问题。

以下为引用内容:
CSS的font-family 
通过CSS Validator发现自己写的css中一个错误,就是generic font family是作为关键字的,因此不能用引号。
这几个关键字是 serif, sans-serif, cursive, fantasy, monospace
下面是一个示例:
body {
 font-family: "Geneva", "Arial", "Helvetica", sans-serif;
}

下面引自 http://www.w3.org/TR/REC-CSS2/fonts.html#generic-font-families
指出了一些常用的字体属于哪一类。



原文还提到了cursive  fantasy  monospace这三个css字体分类,这我倒是第一次听说。
以下为引用内容:
Generic font families
Generic font families are a fallback mechanism, a means of preserving some of the style sheet author's intent in the worst case when none of the specified fonts can be selected. For optimum typographic control, particular named fonts should be used in style sheets. 

All five generic font families are defined to exist in all CSS implementations (they need not necessarily map to five distinct actual fonts). User agents should provide reasonable default choices for the generic font families, which express the characteristics of each family as well as possible within the limits allowed by the underlying technology. 

User agents are encouraged to allow users to select alternative choices for the generic fonts. 

serif
Glyphs of serif fonts, as the term is used in CSS, have finishing strokes, flared or tapering ends, or have actual serifed endings (including slab serifs). Serif fonts are typically proportionately-spaced. They often display a greater variation between thick and thin strokes than fonts from the 'sans-serif' generic font family. CSS uses the term 'serif' to apply to a font for any script, although other names may be more familiar for particular scripts, such as Mincho (Japanese), Sung or Song (Chinese), Totum or Kodig (Korean). Any font that is so described may be used to represent the generic 'serif' family. 

Examples of fonts that fit this description include:

Latin fonts  Times New Roman, Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit  
Greek fonts  Bitstream Cyberbit  
Cyrillic fonts  Adobe Minion Cyrillic, Excelcior Cyrillic Upright, Monotype Albion 70, Bitstream Cyberbit, ER Bukinst  
Hebrew fonts  New Peninim, Raanana, Bitstream Cyberbit  
Japanese fonts  Ryumin Light-KL, Kyokasho ICA, Futo Min A101  
Arabic fonts  Bitstream Cyberbit  
Cherokee fonts  Lo Cicero Cherokee  

sans-serif
Glyphs in sans-serif fonts, as the term is used in CSS, have stroke endings that are plain -- without any flaring, cross stroke, or other ornamentation. Sans-serif fonts are typically proportionately-spaced. They often have little variation between thick and thin strokes, compared to fonts from the 'serif' family. CSS uses the term 'sans-serif' to apply to a font for any script, although other names may be more familiar for particular scripts, such as Gothic (Japanese), Kai (Chinese), or Pathang (Korean). Any font that is so described may be used to represent the generic 'sans-serif' family. 

Examples of fonts that fit this description include:

Latin fonts  MS Trebuchet, ITC Avant Garde Gothic, MS Arial, MS Verdana, Univers, Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk, Helvetica  
Greek fonts  Attika, Typiko New Era, MS Tahoma, Monotype Gill Sans 571, Helvetica Greek  
Cyrillic fonts  Helvetica Cyrillic, ER Univers, Lucida Sans Unicode, Bastion  
Hebrew fonts  Arial Hebrew, MS Tahoma  
Japanese fonts  Shin Go, Heisei Kaku Gothic W5  
Arabic fonts  MS Tahoma  

cursive
Glyphs in cursive fonts, as the term is used in CSS, generally have either joining strokes or other cursive characteristics beyond those of italic typefaces. The glyphs are partially or completely connected, and the result looks more like handwritten pen or brush writing than printed letterwork. Fonts for some scripts, such as Arabic, are almost always cursive. CSS uses the term 'cursive' to apply to a font for any script, although other names such as Chancery, Brush, Swing and Script are also used in font names. 

Examples of fonts that fit this description include:

Latin fonts  Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand, Zapf-Chancery  
Cyrillic fonts  ER Architekt  
Hebrew fonts  Corsiva  
Arabic fonts  DecoType Naskh, Monotype Urdu 507  

fantasy
Fantasy fonts, as used in CSS, are primarily decorative while still containing representations of characters (as opposed to Pi or Picture fonts, which do not represent characters). Examples include:

Latin fonts  Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz  

monospace
The sole criterion of a monospace font is that all glyphs have the same fixed width. (This can make some scripts, such as Arabic, look most peculiar.) The effect is similar to a manual typewriter, and is often used to set samples of computer code. 

Examples of fonts which fit this description include: Latin fonts  Courier, MS Courier New, Prestige, Everson Mono  
Greek Fonts  MS Courier New, Everson Mono  
Cyrillic fonts  ER Kurier, Everson Mono  
Japanese fonts  Osaka Monospaced  
Cherokee fonts  Everson Mono 


原文地址:
http://www.donews.net/wordy/archive/2004/12/05/193748.aspx
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mermaid 编辑器(增强版)</title> <style> :root { --font-main: -apple-system, BlinkMacSystemFont, 'San Francisco', Helvetica, Arial, sans-serif; --primary-color: #007aff; --text-color: #111; --bg-color: #f9f9f9; --card-bg: #fff; --border-radius: 20px; --shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } body { font-family: var(--font-main); background: var(--bg-color); color: var(--text-color); margin: 0; padding: 2rem; } .container { max-width: 960px; margin: auto; } .card { background: var(--card-bg); border-radius: var(--border-radius); padding: 2rem; margin-bottom: 2rem; box-shadow: var(--shadow); } textarea { width: 100%; height: 200px; font-family: monospace; border-radius: 10px; padding: 1rem; margin-bottom: 1rem; border: 1px solid #ccc; } button, select { font-family: inherit; background: var(--primary-color); color: white; padding: 0.5rem 1rem; border: none; border-radius: 8px; cursor: pointer; margin-right: 10px; } .mermaid-box { background: white; border-radius: 12px; padding: 1rem; overflow-x: auto; } </style> <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/canvg/dist/browser/canvg.min.js"></script> </head> <body> <div class="container"> <div class="card"> <h2>🛠 自定义 Mermaid 编辑器(增强)</h2> <textarea id="mermaidInput">graph TD\n A[开始] --> B[步骤一]\n B --> C[步骤二]\n C --> D[结束]</textarea> <div> <button onclick="renderMermaid()">渲染图表</button> <button onclick="saveSnapshot()">保存快照</button> <button onclick="exportPNG()">导出 PNG</button> <button onclick="clearMermaid()">清空</button> <select id="themeSelect" onchange="switchTheme(this.value)"> <option value="default">亮色主题</option> <option value="dark">暗色主题</option> <option value="neutral">中性灰</option> </select> </div> <div class="mermaid-box" id="customMermaid"></div> <h3>📜 历史快照</h3> <ul id="historyList"></ul> </div> </div> <script> let theme = 'default'; let history = JSON.parse(localStorage.getItem('mermaidHistory') || '[]'); let currentCode = localStorage.getItem('lastCode') || document.getElementById('mermaidInput').value; function switchTheme(val) { theme = val; renderMermaid(); } function renderMermaid() { const code = document.getElementById('mermaidInput').value; currentCode = code; localStorage.setItem('lastCode', code); const insert = document.getElementById('customMermaid'); insert.innerHTML = ''; mermaid.initialize({ startOnLoad: false, theme }); mermaid.render('graphDiv', code, (svgCode) => { insert.innerHTML = svgCode; }); } function clearMermaid() { document.getElementById('mermaidInput').value = ''; document.getElementById('customMermaid').innerHTML = ''; localStorage.removeItem('lastCode'); } function saveSnapshot() { history.unshift(currentCode); if (history.length > 10) history = history.slice(0, 10); localStorage.setItem('mermaidHistory', JSON.stringify(history)); loadHistory(); } function loadHistory() { const list = document.getElementById('historyList'); list.innerHTML = ''; history.forEach((code, i) => { const li = document.createElement('li'); li.innerHTML = `<a href="#" onclick='restore(${i})'>图 ${i + 1}</a>`; list.appendChild(li); }); } function restore(index) { const code = history[index]; document.getElementById('mermaidInput').value = code; renderMermaid(); } async function exportPNG() { const svg = document.querySelector('#customMermaid svg'); if (!svg) return alert('请先渲染图表'); const canvas = document.createElement('canvas'); canvas.width = 1024; canvas.height = 768; const ctx = canvas.getContext('2d'); const v = await Canvg.fromString(ctx, new XMLSerializer().serializeToString(svg)); await v.render(); const link = document.createElement('a'); link.download = 'diagram.png'; link.href = canvas.toDataURL(); link.click(); } // 初始化渲染 document.getElementById('mermaidInput').value = currentCode; renderMermaid(); loadHistory(); </script> </body> </html> 上面的代码有问题,无法渲染mermaid,无法生成渲染图,
最新发布
07-16
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值