gpt4 book ai didi

javascript - 使用 dom 创建带有样式标签的 @font-face 不能正常工作?

转载 作者:太空宇宙 更新时间:2023-11-03 20:45:17 25 4
gpt4 key购买 nike

我正在尝试使用带有 JavaScript 的 DOM 来初始化一个 style 标签,但出于某种原因,下面的代码无法正常工作。基本上我有一个用于容器的 div(它是 id),我希望 p 标记在 div 上显示文本。到目前为止,我有这个。

<html>
<head>
</head>
<style>
body
{
background-color: black;
}
#container
{
position: relative;
margin: 0 auto;
height: 100%;
width: 100%;
z-index: 1;
}
#p_1
{
font-family: my_custom;
font-size: 50px;
color: red;
z-index: 2;
}
</style>
<script language = "JavaScript">
function initialize_font()
{
var special_font = document.createElement("style");
special_font.type = "text/css";
document.body.insertBefore( special_font, container);
special_font.styleSheet.cssText = "@font-face {" + font-family: my_custom; src: url('my_custom.TTF'); + "}";
}
</script>
<body onload = "initialize_font()">
<div id = "container">
<p id = "p_1">hello</p>
</div>
</body>
</html>

最佳答案

你弄乱了引号并且没有以正确的方式创建样式标签,样式必须在头部部分,你不必等待 onload 事件,因为 DOM 不需要准备好插入样式标签。

类似这样的东西

<html>
<head>
<style type="text/css">
body {
background-color: black;
}
#container {
position: relative;
margin: 0 auto;
height: 100%;
width: 100%;
z-index: 1;
}
#p_1 {
font-family: my_custom;
font-size: 50px;
color: red;
z-index: 2;
}
</style>
<script type="text/javascript">
var special_font = document.createElement("style");
special_font.type = "text/css";
special_font.innerHTML = "@font-face {font-family: my_custom; src: url('my_custom.TTF');}";
document.getElementsByTagName('head')[0].appendChild(special_font);
</script>
</head>
<script>
</script>
<body>
<div id = "container">
<p id = "p_1">hello</p>
</div>
</body>
</html>

关于javascript - 使用 dom 创建带有样式标签的 @font-face 不能正常工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21635687/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com