在网页中高效地添加自定义字体并在已有字体列表前插入，可以通过以下步骤实现：
@font-face 定义自定义字体首先，使用 @font-face 规则定义你的自定义字体。这通常放在CSS文件中。
@font-face {
font-family: 'MyCustomFont';
src: url('path/to/MyCustomFont.woff2') format('woff2'),
url('path/to/MyCustomFont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
你可以使用JavaScript来动态地将自定义字体插入到已有字体列表的前面。假设你有一个字体列表的CSS类名为 .font-list，你可以这样做：
// 获取字体列表元素
const fontList = document.querySelector('.font-list');
// 创建一个新的字体选项
const customFontOption = document.createElement('option');
customFontOption.value = 'MyCustomFont';
customFontOption.textContent = 'My Custom Font';
// 将自定义字体选项插入到字体列表的最前面
fontList.insertBefore(customFontOption, fontList.firstChild);
当用户选择自定义字体时，你可以通过JavaScript动态地改变元素的字体。
fontList.addEventListener('change', function() {
const selectedFont = fontList.value;
document.body.style.fontFamily = selectedFont;
});
为了确保字体加载不会影响页面性能，可以使用 FontFace API 来异步加载字体。
const myFont = new FontFace('MyCustomFont', 'url(path/to/MyCustomFont.woff2)');
myFont.load().then((loadedFont) => {
document.fonts.add(loadedFont);
console.log('Custom font loaded successfully');
}).catch((error) => {
console.error('Failed to load custom font:', error);
});
以下是一个完整的示例，展示了如何定义、加载和应用自定义字体：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Font Example</title>
<style>
@font-face {
font-family: 'MyCustomFont';
src: url('path/to/MyCustomFont.woff2') format('woff2'),
url('path/to/MyCustomFont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<select class="font-list">
<option value="Arial">Arial</option>
<option value="Verdana">Verdana</option>
<option value="Georgia">Georgia</option>
</select>
<p>This is a sample text.</p>
<script>
// 动态插入自定义字体选项
const fontList = document.querySelector('.font-list');
const customFontOption = document.createElement('option');
customFontOption.value = 'MyCustomFont';
customFontOption.textContent = 'My Custom Font';
fontList.insertBefore(customFontOption, fontList.firstChild);
// 加载自定义字体
const myFont = new FontFace('MyCustomFont', 'url(path/to/MyCustomFont.woff2)');
myFont.load().then((loadedFont) => {
document.fonts.add(loadedFont);
console.log('Custom font loaded successfully');
}).catch((error) => {
console.error('Failed to load custom font:', error);
});
// 应用选择的字体
fontList.addEventListener('change', function() {
const selectedFont = fontList.value;
document.body.style.fontFamily = selectedFont;
});
</script>
</body>
</html>
通过以上步骤，你可以高效地在网页已有字体列表前添加自定义字体，并确保字体加载和应用的过程不会影响页面性能。