在我的應用程序中，我允許用戶上傳各種格式的自定義字體（如 ttf、otf 等）。這些文件存儲在服務器上，可以通過簡單的 GET 請求進行訪問。我構建了一個選擇，其中包含這些字體，選擇后，某些元素的字體應更改為該字體。我應該如何更改元素的樣式？據我所知有2種方法：循環遍歷自定義字體并通過鏈接元素包含該字體。然而，這種方法是有缺陷的，因為我無法可靠地檢測字體系列名稱，因此我無法設置我想要設置樣式的元素的字體系列樣式。使用 @font-face 注入 css 規則。這種方法可行，但它有明顯的安全漏洞，因為我會將用戶生成的 css 注入瀏覽器中。我使用 vuejs，所以我可以安全地將 css 附加到各個元素，但據我所知 @font-face 不能通過在每個元素上重新定義它來工作。是否有一些像 font: url(src) 這樣的屬性我可以使用？提前致謝
1 回答
陪伴而非守候
TA貢獻1757條經驗 獲得超8個贊
我不知道你為什么在選項 2 中說“用戶生成的 css”。它不會是用戶生成的 css。您將自己生成此 css。比這更好的是，您可以從自己的 API 調用字體，因此用戶與另一個用戶之間的 css 的唯一區別是您可以保護的一些參數。
@font-face 允許您在屬性中為字體指定任何名稱font-family。您可以為您的字體系列創建名稱模式，并動態為您的元素提供這些字體名稱。
function changeFont() {
// dynamic number. Create your own logic to generate this number
const i = 123;
// put your API path to the dinamic font file. I'm using a demo font
const fontsource = "https://fonts.gstatic.com/s/robotoslab/v11/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjoa4Omb2Rm.ttf";
const style = document.createElement('style');
style.innerHTML = `
@font-face {
font-family: customfont${i};
src: url(${fontsource});
}
`;
document.head.appendChild(style);
const p = document.getElementById('text');
p.style.fontFamily = 'customfont' + i;
}
<p id="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<button onclick="changeFont()">Click me</button>
- 1 回答
- 0 關注
- 162 瀏覽
添加回答
舉報
0/150
提交
取消