JS 캔버스 - 특정 텍스트 중량

Question

나는 현재 텍스트 폭을 계산하기 위해 다음 코드를 사용하고

와 계산 텍스트 폭 : 잘 작동

function measureWordSize(word, font) { 
    var canvas = measureWordSize.canvas || (measureWordSize.canvas = document.createElement("canvas")); 
    var context = canvas.getContext("2d"); 
    context.font = font; 
    var metrics = context.measureText(word); 
    return metrics.width; 
} 

을하지만, font 속성은 문자열과 같이 포맷해야합니다 : [italic] [bold] <font-size> <font-family>.

텍스트 폭을 특정 text-weight으로 계산하고 글꼴을 700px <font-size> <font-family>으로 설정하려고합니다. MDN은 숫자에 대해 아무 것도 말하지 않습니다. text-weight.

숫자가 text-weight 인 요소의 텍스트 너비는 어떻게 계산합니까?

Answer 1

context.font은 CSS font 속기 속성과 동일한 형식을 허용합니다. |

_{는 MDN}

/* 크기에서 촬영 family */
글꼴 : 2em "Open Sans", sans-serif;

/* 스타일 | 크기 | family */
글꼴 : italic 2em "Open Sans", sans-serif;

/* 스타일 | 변형 | 무게 | 크기/선 높이 | 가족 */
글꼴 : 기울임 꼴 작은 대문자 16px/3 체 서체;

/* 스타일 | 변형 | 무게 | 스트레칭 | 크기/선 높이 | 가족 */
글꼴 : italic small-caps 대담한 압축 16px/3 체체;

그래서 당신은 또한 단지 CSS와 같은 숫자 규모로 font-weight을 설정할 수 있습니다

const ctx = canvas.getContext('2d'); 
 
const str = "I'm bold"; 
 
// set the font as numeric-font-weight | font-size | font-name 
 
ctx.font = '700 16px sans-serif'; 
 
console.log('bold:', ctx.measureText(str).width); 
 

 
ctx.fillText(str, 0, 20) 
 
// reset to normal font-weight 
 
ctx.font = '400 16px sans-serif'; 
 
console.log('medium:', ctx.measureText(str).width);

<canvas id="canvas"></canvas>