在我的應(yīng)用程序中，我允許用戶上傳各種格式的自定義字體（如 ttf、otf 等）。這些文件存儲在服務(wù)器上，可以通過簡單的 GET 請求進(jìn)行訪問。我構(gòu)建了一個選擇，其中包含這些字體，選擇后，某些元素的字體應(yīng)更改為該字體。我應(yīng)該如何更改元素的樣式？據(jù)我所知有2種方法：循環(huán)遍歷自定義字體并通過鏈接元素包含該字體。然而，這種方法是有缺陷的，因?yàn)槲覠o法可靠地檢測字體系列名稱，因此我無法設(shè)置我想要設(shè)置樣式的元素的字體系列樣式。使用 @font-face 注入 css 規(guī)則。這種方法可行，但它有明顯的安全漏洞，因?yàn)槲視⒂脩羯傻?css 注入瀏覽器中。我使用 vuejs，所以我可以安全地將 css 附加到各個元素，但據(jù)我所知 @font-face 不能通過在每個元素上重新定義它來工作。是否有一些像 font: url(src) 這樣的屬性我可以使用？提前致謝
1 回答
陪伴而非守候
TA貢獻(xiàn)1757條經(jīng)驗(yàn) 獲得超8個贊
我不知道你為什么在選項(xiàng) 2 中說“用戶生成的 css”。它不會是用戶生成的 css。您將自己生成此 css。比這更好的是，您可以從自己的 API 調(diào)用字體，因此用戶與另一個用戶之間的 css 的唯一區(qū)別是您可以保護(hù)的一些參數(shù)。
@font-face 允許您在屬性中為字體指定任何名稱font-family。您可以為您的字體系列創(chuàng)建名稱模式，并動態(tài)為您的元素提供這些字體名稱。
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 關(guān)注
- 187 瀏覽
添加回答
舉報(bào)
0/150
提交
取消