我有一个简单的网页:
<html>
<head>
<title>...</title>
<script ...></script>
<link .../>
<script>
/* HERE */
</script>
</head>
<body>
<div id="cnt"></div>
</body>
</html>
在头部部分，我加载了 jQuery 脚本和 Google Web Fonts 字体样式。
我想动态地向我的#cnt 添加内容，我执行以下操作(下面的代码位于之前打印的代码 list 中突出显示的位置):
$(document).ready(function(){
var $el1 = $('<div style=\'position:absolute;top:50px;left:425px;font-family:\'Oxygen\',sans-serif;font-weight:300;font-size:35px\'>Hello1</div>');
var $el2 = $('<div style=\'width:350px;height:200px;position:absolute;top:110px;left:425px;font-family:\'Open Sans\',sans-serif;font-weight:400;font-size:19px\'>Hello2.</div>');
var $el3 = $('<div style=\'width:350px;height:200px;position:absolute;top:110px;left:425px;font-family:\'Open Sans\',sans-serif;font-weight:400;font-size:19px\'>Hello3.</div>');
var $el4 = $('<div id=\'imm\' style=\'position:absolute;top:-10px;left:-20px;background-image:url(\'images/imm.png\');width:399px;height:503px\'></div>');
$('#main').append($el1);
$('#main').append($el2);
$('#main').append($el3);
$('#main').append($el4);
});
然而，一旦显示字体没有按应有的样式设置(这意味着未应用 Google 字体，我的文本使用默认设置显示，就像指定的font-family 无效)并且图像未加载。
我确信这是很常见的事情，但找不到关于此事的问题。怎么办？
最佳答案
JQuery 可以帮助您以更具可读性的方式做同样的事情(顺便避免一些头疼)。
var $el3 = $('<div >Hello2.</div>')
.css({
'width':'350px',
'height':'200px',
'position':'absolute',
'top':'110px',
'left':'425px',
'font-family':"'Open Sans',sans-serif;font-weight:400;font-size:19px"});
关于javascript - jQuery动态添加的文字不会加载网页字体样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19480106/