问候,
我正在开发一个标签工具,允许用户在将标签添加到地图中作为图形的文本符号之前设置字体系列、大小、重量变化和标签样式。我可以设置所有这些属性,除了字体族。图形的字体系列总是设置为“Helvetica Neue, Helvetica, Arial字体诞生了,不管我在“font.setFamily()”方法中输入了什么值。
我有几个问题。首先是可以传递给"font.setFamily()"方法的字体值的权威列表。接下来,一旦有了这些值,如何让图形的文本符号显示这些字体呢?
我像这样分配我的字体属性:
让字体=新字体();字体。setVariant(字体。VARIANT_NORMAL);字体。setWeight(字体(“WEIGHT_BOLDER”]);字体。setFamily(“影响”);字体。setStyle(字体(“STYLE_OBLIQUE”]);字体。setSize(20.);让textSymbol=新TextSymbol(笔记,字体,颜色);让textJSON=textSymbol。toJson();让labelg=新图形(图形。几何,textSymbol,图形。属性);控制台。日志(labelg。象征。toJson());层。添加(labelg);
当我检查label .symbol. tojson()的console.log时,我得到:
{大小:15,风格:“斜”,重量:“大胆”,家庭:“影响”}。除了字体大小是15而不是20之外,这几乎是我所期望的。
但是,当图形加载时,显然是不受影响的。在地图上右键点击标签并选择“Inspect”菜单选项以查看开发者控制台中标签的HTML,我看到以下内容:
<文本填满="Rgb (0, 0, 0)"填充不透明度="1"中风="没有一个"stroke-opacity="0"笔划宽度="1"stroke-linecap="屁股"stroke-linejoin="斜方"stroke-miterlimit="4"x="196"y="394"文本链接="中间"文字修饰="未定义的"旋转="0"字距调整="汽车"文本渲染="optimizeLegibility"字体- - - - - -风格= "斜"字体参数="正常的"粗细="更大胆的"字体大小="20."字体类型="的影响,天线"dominant-baseline="字母"变换="矩阵(1.00000000,0.00000000,0.00000000,1.00000000,0.00000000,0.00000000)"fill-rule="evenodd"><tspandy="0"x="196"字母间距="1 px"字体类型="'Helvetica Neue', Helvetica, Arial字体诞生了">快递员新,20,B, Itspan>文本>
文本元素中的“font-family”属性被设置为“impact,Arial”,但是在我看来,tspan元素是在地图中实际样式字体的元素。tspan元素的字体族设置为"'Helvetica Neue',Helvetica,Arial,sans-serif"。如果我在开发人员控制台中更改tspan的font-family属性为“impact”,那么字体族将在地图中正确显示。
如何使用JavaScript API正确地获得tspan的字体族集?
谢谢你,泰勒
你好,谢,
我用了字体类与TextSymbol类从API库中创建这个例子。然而,在ESRI示例中显示的TextSymbol不携带tspan div中的字体样式。在ESRI示例中,文本符号的html看起来是这样的:
<文本填满="Rgb (0, 0, 0)"填充不透明度="1"中风="没有一个"stroke-opacity="0"笔划宽度="1"stroke-linecap="屁股"stroke-linejoin="斜方"stroke-miterlimit="4"x="315"y="184"文本链接="中间"文字修饰="未定义的"旋转="0"字距调整="汽车"文本渲染="optimizeLegibility"字体- - - - - -风格= "正常的"字体参数="正常的"粗细="更大胆的"字体大小="40"字体类型="的影响,天线"dominant-baseline="字母"变换="矩阵(1.00000000,0.00000000,0.00000000,1.00000000,0.00000000,0.00000000)"fill-rule="evenodd">X: -13,047,355.689, y: 4,035,635.357文本>
我不确定为什么我的实现在tspan元素中携带font-family属性。
谢谢你,泰勒
有趣的. .我以前从没注意过那门课。无论如何,我使用了你提到的“影响”字体家族的样本,它似乎在我这边工作得很好。
我不清楚你的环境,不知道为什么你在那里遇到困难,但我可以推荐两件事-
1.将其分解成小块-使用setFamily函数时,没有框架或第三方工具的纯HTML似乎可以工作,因此它可能与您的环境有关。
2.覆盖css设置——这可能不是“最干净”的解决方案,但如果你不能让它“按书”工作,我认为用你自己的样式覆盖css样式是可以接受的
.new-style {font-family: "impact" !important}
抱歉我不能回答你的问题
如果你想更好地理解(或修改)Font类的行为,你可以下载API并使用代码-但我绝对不建议这样做。最好是用自己的样式覆盖该样式。
祝你好运
谢。