글꼴

X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 글꼴 필드 는 타이포그래피 필드의 단일 목적 형제입니다: 하나의 드롭다운,하나의 값,글꼴 패밀리. 편집자는 시스템 글꼴과 Google 글꼴 목록에서 선택하고 위젯은 일반 문자열로 패밀리 이름을 받습니다. 마스터 애드온 내부 위젯 빌더위젯이 요소가 사용하는 서체만 변경하면 되고 다른 것은 변경하지 않아도 되는 경우 가벼운 선택이 됩니다.

글꼴 필드가 지원합니다 조건“사용자 정의 타이포그래피” 토글이 켜져 있고 해당 값이 다음을 통해 인쇄될 때만 공개하는 데 편리합니다 나뭇가지 구문 템플릿 엔진 CSS 로. 두 가이드 모두 설정과 제한 사항을 다룹니다.

달리 타이포그래피 분야선택기를 통해 작동하고 템플릿 토큰이 없는 를 Font 필드는 토큰 필드입니다. You write the font-family CSS 패널에서 자신을 지배하고 필드의 값을 인쇄하십시오. 그 차이는 주어진 위젯이 필요로하는 두 필드 중 어느 필드를 결정합니다.

Font 필드가 하는 일 #

• 시스템 글꼴과 Google 글꼴을 나열하는 위젯의 Elementor 패널에서 글꼴 모음 드롭다운을 렌더링합니다.
• 예를 들어 선택한 패밀리를 일반 문자열로 저장합니다 Lora 또는 Georgia.
• 해당 문자열을 인쇄합니다 {{ your_field_name }}, 일반적으로 내부 a font-family CSS 패널에서 규칙.
• 정확히 하나의 속성을 제어합니다. 크기,무게, 간격,나머지는 스타일시트 또는 별도의 컨트롤에 유지됩니다.
• 위젯이 의도적인 서체로 제공되도록 기본 성을 사용합니다.

아직 위젯을 구축하지 않으셨나요? The 위젯 빌더 개요 현장 수준 문서보다 먼저 시작할 수 있는 장소입니다.

시작하기 전에 #

• 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
• Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
• Widget Builder 편집기에서 열리는 사용자 정의 위젯입니다. 우리의 예는 글꼴 필드가 명명된 풀 인용 위젯입니다 quote_font 그러면 인용문 텍스트의 서체만 변경됩니다.

글꼴 필드를 추가하는 방법 #

드래그하세요 글꼴 필드 패널에서 아래 섹션으로 필드 스타일 탭, 그것의 자연적인 가정, 어떤 탭이 작동하더라도. 그것의 선택권은 일단 착륙하면 왼쪽에 열립니다.

글꼴 필드 옵션을 설명했습니다 #

옵션 목록은 필드의 포인트 인 짧은:

• 라벨: elementor의 드롭다운 옆에 표시된 텍스트, 예를 들어 “Quote Font”.
• 이름: 템플릿이 참조하는 고유 식별자입니다. 예를 들어 문자,숫자 및 밑줄만 표시됩니다 quote_font.
• 기본값: 예를 들어 위젯의 성 문자열은 다음으로 시작됩니다 Georgia. 누군가가 컨트롤을 터치하기 전에 잘 렌더링되는 것을 선택하십시오.

CSS 패널에서 글꼴 필드를 연결합니다 #

글꼴 필드는 토큰 필드이며 CSS 패널은 해당 토큰이 속한 곳입니다. a 안의 값을 인쇄합니다 font-family 규칙 및 항상 fallback 스택으로 그것을 따르십시오:

/* CSS panel */
.pq-quote {
  font-family: {{ quote_font }}, Georgia, serif;
  font-size: 1.5rem;
  line-height: 1.4;
}

토큰은 선택한 성을 렌더링하므로 위의 규칙은 다음과 같습니다 font-family: Lora, Georgia, serif; 편집자가 Lora 를 고를 때. 크기와 선 높이는 당신의 것을 유지하십시오; 컨트롤은 서체 만 바꿉니다.

토큰은 HTML 패널에서도 작동합니다. 예를 들어 특정 가족이 활성화되면 클래스를 전환하는 조건부에서 작동하지만 CSS가 이를 위한 실용적인 홈입니다.

조심하세요: 이 드롭다운에서 Google 글꼴을 선택하면 글꼴 파일이 로드되지 않습니다. 타이포그래피 그룹 컨트롤과 달리 글꼴 필드는 Google 글꼴을 자동 대기열에 추가하지 않으므로 선택한 웹 글꼴은 사이트에서 다른 방식으로 로드하지 않는 한 대체 파일로 렌더링됩니다. 위젯이 글꼴 자체를 로드하거나 Google 글꼴 스타일시트 링크를 추가하는 작은 JS 패널 인젝터가 작동하거나 사이트에 이미 있는 글꼴 스택에 대한 기대치를 제한합니다. 토큰 이후의 대체 스택은 선택적 장식이 아닙니다; 가족이 로드되지 않을 때마다 방문자가 보는 것입니다.

JS 패널의 최소 로더는 다음과 같습니다:

// JS panel
var fam = "{{ quote_font }}";
if (fam && !document.getElementById("pq-font")) {
  var l = document.createElement("link");
  l.id = "pq-font";
  l.rel = "stylesheet";
  l.href = "https://fonts.googleapis.com/css2?family=" +
           encodeURIComponent(fam) + "&display=swap";
  document.head.appendChild(l);
}

그 로더의 미묘함: getElementById 고정 ID 의 가드 키이므로 두 개의 다른 패밀리가 있는 페이지에 동일한 위젯이 두 번 나타나면 첫 번째 인스턴스의 글꼴만 로드됩니다. 두 번째 인스턴스는 자동으로 뒤로 넘어집니다. 페이지당 여러 인스턴스가 위젯의 현실적인 시나리오인 경우 대신 패밀리 이름에서 ID 를 빌드합니다.

Elementor 에서 글꼴 컨트롤을 사용합니다 #

Elementor 의 페이지에 사용자 정의 위젯을 추가하거나,페이지가 이미 열려 있는 경우 편집기를 다시 로드합니다. 글꼴 필드가 레이블 아래에 드롭다운으로 나타납니다; 열면 입력할 때 가족 목록을 검색할 수 있습니다.

제품군을 선택하고 미리보기가 업데이트됩니다. 위젯이 글꼴을 로드하면 파일이 도착하자마자 새 서체가 들어갑니다. 그렇지 않으면 요소가 스택에서 대체를 렌더링합니다.

일반적인 사용 사례 #

• 인용문 및 추천 위젯 인용문 텍스트만 서체를 바꾸는 경우.
• 장식 제목 영웅 및 배너 위젯에서는 본문 텍스트를 그대로 유지합니다.
• 모노그램, 드롭캡, 라벨 요소 하나의 디스플레이 페이스를 가지고 있습니다.
• 단일 브랜드 선택을 노출하는 위젯 클라이언트에게 전체 타이포그래피 패널을 열지 않고.
• 조건부 클래스 전환한 제품군에 추가 문자 간격 규칙이 필요할 때 HTML 패널의 값을 비교합니다.

글꼴 필드와 함께 작업하기 위한 팁 #

• 항상 fallback stack 을 작성한다. font-family: {{ quote_font }}, Georgia, serif; 선택한 글꼴이 로드되지 않을 때 위젯을 읽을 수 있도록 유지합니다.
• 자동 대기열이 없다는 것을 기억하세요. 여기에서 고른 Google 글꼴은 위젯에 있는 장전기를 필요로 한다 또는 그들을 이미 적재 하는 위치; 저것은 분야의 1 개의 날카로운 가장자리 이다.
• 더 필요할 때 타이포그래피에 도달하세요. 크기, 무게, 간격, 반응형 값, 자동 글꼴 로딩 등이 모두 에 속합니다 타이포그래피 분야. 글꼴은 가족 전용 케이스입니다.
• 실제 Default 를 설정합니다. 명시적인 시작 가족은 테마가 계단식으로 이어지는 모든 것을 상속하는 것을 능가합니다.
• 토큰을 CSS에 보관하십시오. CSS 패널의 한 규칙은 HTML을 통해 흩어져 있는 인라인 스타일 속성보다 유지 관리가 더 쉽습니다.
• 여기에서 Selector 바로가기를 기대하지 마십시오. 이 필드의 자연스러운 배선은 자신의 토큰입니다 font-family 대체도 제어하는 규칙입니다.

자주 묻는 질문 #

감싸는 #

위젯 빌더 글꼴 필드는 표면이 거의 없는 한 가지 작업을 수행합니다: 패널의 가족 드롭다운, 문자열 토큰 font-family 규칙, 그리고 당신의 손에 남아있는 fallbacks의 전체 제어. 당신이 구글 가족을 제공 할 때 글꼴을로드하고, 에 단계 타이포그래피 분야 위젯에 전체 텍스트 스타일 패널이 필요한 경우 나머지 부분을 탐색합니다 마스터 애드온 위젯 및 확장, 그리고 보세요 가격 페이지 각 계획에 포함된 내용입니다.