나는 특정 너비에 정확하게 문자열을 맞추려고합니다. 즉, 글꼴 크기는 문자열에 따라 달라집니다. 이제 jQuery를 사용하여 다음 함수를 사용합니다.자바 스크립트에서 문자열 너비 측정
CSS의 글꼴 크기를 가능한 한 가장 작은 값으로 설정한다는 생각입니다. 이 값으로 루프를 초기화하고 문자열이 포함 요소의 너비보다 넓어 질 때까지 글꼴 크기를 1 씩 증가시킵니다. 이 경우 문자열은 "날짜"이고 포함하는 요소는 "시계"입니다.
비록 이것이 작동하지만, 가장 큰 단점은 문자열을 먼저 그려야 만 폭을 결정할 수 있다는 것입니다. 즉, 본문을로드하기 전에이 함수를 호출 할 수 없습니다.
더 좋은 방법을 알고 계시면 알려 주시기 바랍니다. 감사.
페이지가 완전히 렌더링 될 때 적용될 모든 스타일이 적용되도록하려면 해당 요소를 DOM에 배치해야합니다. DOM) 측정 항목을 수행하기 전에. 그러나 모든 것이 끝날 때까지 기다릴 필요가 없습니다. 이 있습니다 (측정하는 문자열의 스타일에 영향을 줄 것이라고 생각하지 않는 한). script 블록 에 바로 코드를 입력 할 수 있습니다. — ready을 기다리지 않고 질문의 요소 다음에을 입력하십시오. Google's Closure library engineers에 따르면 date 요소가 있으며 액세스 할 수 있습니다. 예를 들면, date 경우입니다 span :
<body>
...
<span id="date">December 13th</span>
<script>fontResize();</script>
...
...
</body>
이 코드를 혼용하고 (마크 업 및 코드을하는 별도의 팀이 특히 경우),하지만 귀하의 요구 사항이 크기 인 경우 텍스트 절대적으로 그와 같은 마크 업 불행한 일 가능한 한 빨리 그 방법입니다.
위의 내용은 사용자의 fontResize 함수가 이미로드되었다고 가정합니다 (예 : 페이지의 script 블록보다 높음). 이것은 보통 마크 업과 코드를 혼합하는 것은 불행한 또 다른 이유입니다. 보통 body 태그를 닫기 직전에 스크립트 at the bottom을 넣기를 원하기 때문입니다.
: body 태그 바로 앞에 입력 한 스크립트에서 크기를 조정할 수 있는지 알아 보는 것이 좋습니다. 페이지가 제대로 보이지 않을 수있는 작은 기회가있을 수 있지만 아주 작고 코스 페이지는 어쨌든로드 될 때 다소 재미있어 보입니다. 그렇다면 섞여있는 문제가 없으므로 스크립트를 일찍로드 할 필요가 없습니다. 마감 직전 인 body 태그가 곧 만료 될 수 있습니다.
캔버스와 measureText 메서드를 사용하는 것은 어떻습니까?
$(function() {
var canvas = $("canvas")[0];
var context = canvas.getContext("2d");
var text = "hello world";
context.font = "40pt Calibri";
var metrics = context.measureText(text);
alert(metrics.width);
});
감사합니다. 글꼴 크기를 얻기 위해 루프 사용을 제거하는 방법을 알고 있습니까? 루프는 특히 낮은 값으로 초기화 될 때 상당한 시간이 걸릴 것으로 보입니다. – Daan
설명해 주셔서 감사합니다. 배경 이미지 (로드하는 데 더 많은 시간이 필요함)를 사용하고 있기 때문에 이미지를로드 할 때 텍스트를 얻을 수 있다면 가장 좋을 것입니다. "onload"이후에 모든 기능을 수행하는 것이 트릭을 완료 한 것으로 보입니다. 필자가 올바르게 이해한다면 "언로드"한 후 함수는 전체 페이지가로드 될 때만 호출됩니다. 그래서 그것은 의미가 있어야합니다. – Daan
@ KeyMs92 : 예, 'load' 이벤트는 페이지로드 사이클의 마지막 ***에서 모든 리소스가로드 된 끝에 발생합니다.그 정도면 충분하다. 그러나 그렇지 않다면 (DOM에 추가하지 않고) 배경 이미지를 참조하는'img' 엘리먼트를 생성하고'load' 이벤트를 볼 수 있기 때문에 가능한 한 일찍 행동 할 수있다. –