klimaks.zip- (1.16 MiB) 已下载 1 次
- cc-superhuman.zip
- (20.05 KiB) 已下载 1 次
- neu5land.zip
- (161.8 KiB) 已下载 1 次
- akshar-unicode.zip
- (775.18 KiB) 已下载 1 次
- sora.zip
- (797.29 KiB) 已下载 2 次
正在尋找開源，精簡，美觀的英文字體，用途是嵌入svg
Re: 正在尋找開源，精簡，美觀的英文字體，用途是嵌入svg
- seraphine.zip
- (23.35 KiB) 已下载 2 次
- zt-nature.zip
- (152.26 KiB) 已下载 1 次
- kineks-round.zip
- (364.33 KiB) 已下载 2 次
https://ejsoon.vip/
弈趣極光：享受思維樂趣
弈趣極光：享受思維樂趣
Re: 正在尋找開源，精簡，美觀的英文字體，用途是嵌入svg
現在要寫一個html+css+js程式：
最上方有ejfonttesttextarea.textarea和調節字體大小的滑塊，字體大小也允許輸入，其左方和右方也有點擊遞增或遞減。
ejfonttesttextarea.textarea默認有一句話包含二十六個大寫、小寫字母，常用英文標點和數字。
字體大小默認是16px。
下方是一系列字體的展示，包含h2{字體名稱}，div.ejfonttestdisplay{上面的textarea內容}。
div.ejfonttestdisplay顯示的是套用字體的文字內容以及字體大小，如果前面的內容和字體大小發生變動，它也會隨著變動。
在css或js中寫好代碼規範，以方便增減字體。找到一種最適合增減字體的方式。
全部代碼寫在一個.html中，所有代碼都要使用英文。
grok
代码： 全选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font Test</title>
<style>
body {
font-family: sans-serif;
margin: 20px;
}
.ejfonttesttextarea {
width: 100%;
height: 100px;
font-size: 16px;
margin-bottom: 20px;
}
.size-controls {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.size-controls button {
width: 30px;
height: 30px;
font-size: 20px;
margin: 0 10px;
}
.size-controls input[type="range"] {
width: 200px;
margin: 0 10px;
}
.size-controls input[type="number"] {
width: 60px;
text-align: center;
}
.font-section {
margin-bottom: 40px;
}
.ejfonttestdisplay {
white-space: pre-wrap;
word-wrap: break-word;
}
</style>
</head>
<body>
<textarea class="ejfonttesttextarea">The quick brown fox jumps over the lazy dog. 0123456789 !@#$%^&*()_+-=[]{}|;':",./<>?</textarea>
<div class="size-controls">
<button id="decrease-size">-</button>
<input type="range" id="font-size-slider" min="8" max="72" value="16">
<input type="number" id="font-size-input" min="8" max="72" value="16">
<span>px</span>
<button id="increase-size">+</button>
</div>
<div id="font-displays"></div>
<script>
// Define fonts here for easy addition/removal
// Each object has 'name' (font-family name) and 'file' (path to font file, assuming in same folder)
const fonts = [
{ name: 'Font1', file: 'font1.ttf' }, // Replace with actual font files/names
{ name: 'Font2', file: 'font2.woff2' },
// Add more fonts like: { name: 'Font3', file: 'font3.otf' },
];
// Dynamically inject @font-face rules
const styleSheet = document.createElement('style');
fonts.forEach(font => {
styleSheet.innerHTML += `
@font-face {
font-family: '${font.name}';
src: url('${font.file}');
}
`;
});
document.head.appendChild(styleSheet);
// Get elements
const textarea = document.querySelector('.ejfonttesttextarea');
const slider = document.getElementById('font-size-slider');
const input = document.getElementById('font-size-input');
const decreaseBtn = document.getElementById('decrease-size');
const increaseBtn = document.getElementById('increase-size');
const displaysContainer = document.getElementById('font-displays');
// Function to generate or update font displays
function updateDisplays() {
const text = textarea.value || 'Default text';
const size = input.value + 'px';
// If displays don't exist, create them
if (displaysContainer.children.length === 0) {
fonts.forEach(font => {
const section = document.createElement('div');
section.className = 'font-section';
section.innerHTML = `
<h2>${font.name}</h2>
<div class="ejfonttestdisplay" style="font-family: '${font.name}'; font-size: ${size};">${text}</div>
`;
displaysContainer.appendChild(section);
});
} else {
// Update existing displays
const displayDivs = document.querySelectorAll('.ejfonttestdisplay');
displayDivs.forEach(div => {
div.textContent = text;
div.style.fontSize = size;
});
}
}
// Initial update
updateDisplays();
// Event listeners for changes
textarea.addEventListener('input', updateDisplays);
// Sync slider and input
slider.addEventListener('input', () => {
input.value = slider.value;
updateDisplays();
});
input.addEventListener('input', () => {
let value = parseInt(input.value, 10);
if (isNaN(value)) value = 16;
value = Math.max(8, Math.min(72, value));
input.value = value;
slider.value = value;
updateDisplays();
});
// Buttons for increment/decrement
decreaseBtn.addEventListener('click', () => {
let value = parseInt(input.value, 10) - 1;
value = Math.max(8, value);
input.value = value;
slider.value = value;
updateDisplays();
});
increaseBtn.addEventListener('click', () => {
let value = parseInt(input.value, 10) + 1;
value = Math.min(72, value);
input.value = value;
slider.value = value;
updateDisplays();
});
</script>
</body>
</html>https://ejsoon.vip/
弈趣極光：享受思維樂趣
弈趣極光：享受思維樂趣
Re: 正在尋找開源，精簡，美觀的英文字體，用途是嵌入svg
以下幾個在線網站可以將 **.ttf** 或 **.otf** 字體轉換成 **.woff2**，並支援**子集化（subsetting）**，即允許你挑選需要的字符或刪除不需要的字符，以減小檔案大小：
1. **Transfonter**（https://transfonter.org/）
- 最推薦的工具之一。
- 上傳 ttf/otf 後，可以選擇轉換成 woff2（同時支援多格式）。
- 有「Subset」選項，你可以輸入自訂文字（custom text），工具只保留這些文字中用到的字符（glyphs），有效刪除多餘字符。
- 還會自動生成 @font-face CSS 代碼和 demo 頁面，非常適合網頁開發者使用。
2. **AnyConvert TTF to WOFF2**（https://anyconvert.to/ttf-to-woff2）
- 專門支援 ttf 到 woff2 轉換，並內建進階子集化功能。
- 可以選擇字符範圍（character ranges）、語言集，或輸入自訂文字來保留特定字符，刪除其餘的。
- 轉換後檔案可縮小 30-95%，適合優化網頁字體。
3. **Infyways Font Converter**（https://www.infyways.com/tools/font-converter/）
- 支援 ttf/otf 到 woff2 轉換。
- 明確提到支援「font subsetting」，可以只包含需要的字符來減小檔案大小。
4. **Aspose Font Subsetter**（https://products.aspose.app/font/generator/ttf-to-woff2）
- 專門的 ttf 到 woff2 子集工具。
- 你可以指定需要的 glyphs，只生成包含這些字符的 woff2 檔案。
其他工具如 Fontsource 或 CloudConvert 可以轉 woff2，但子集化功能較弱或沒有自訂挑選字符的選項。
如果需要更精細控制（如基於網站內容自動子集），建議用 Transfonter 或 AnyConvert，最簡單上手。轉換時注意字體授權，避免侵犯版權。
https://ejsoon.vip/
弈趣極光：享受思維樂趣
弈趣極光：享受思維樂趣
在线用户
正浏览此版面之用户： Ahrefs [Bot] 和 3 访客