Tipik bir web sayfası genellikle, çoğu farklı renklerde kodlanmış ve farklı yazı tiplerinde ve stillerde yazılmış birkaç farklı öğeden oluşur. Bazen, o kadar güzel tasarlanmış web sayfalarıyla karşılaşıyoruz ki, bu sayfalar, niteliklerini derinlemesine araştırmak istememize neden oluyor; belki çok zarif bir tema ya da hoş, profesyonel bir yazı tipi.

Yazı tiplerini bilen ve bunlara hayran olan kişiler, genellikle web'de yazı tiplerini keşfetmeye yardımcı olmak için ücretsiz çevrimiçi yazı tipi tanımlayıcı araçlarını kullanır. ^{(free online font identifier tools)}Bu çevrimiçi araçlar, bir URL^(URL) girmenizi veya gösterilen yazı tipiyle bir resim yüklemenizi gerektirir ve ardından incelenir. Yeni bir araç kullanmayı öğrenmenin zorluğunu yaşamak istemiyorsanız, bu yazı tam size göre. Bugün, kullanıcıların bir tarayıcı uzantısı, uygulama veya herhangi bir çevrimiçi araç kullanmadan belirli bir web sayfasının hangi yazı tipini kullandığını nasıl belirleyebileceklerini tartışacağız.

Bu makalede tartışacağımız prosedür, çoğu web tarayıcısının sunduğu bir ayar, yani ' Geliştirici Araçları ' veya daha spesifik olarak ^{(Developer Tools)}Inspect Element adlı bir seçenek etrafında dönecektir . Burada yazı tiplerinin iki tarayıcıda nasıl tanımlanabileceğini tartışacağız – Chrome , Edge ve Firefox .

^(Identify)Firefox'ta ^(Firefox)Inspect Element'i^{(Inspect Element)} kullanarak bir web sayfasındaki yazı tiplerini tanımlayın

Tanımlamak istediğiniz fontun web sayfasını ziyaret edin ve ilgilendiğiniz fontta yazılan metne sağ tıklayın.

Görüntülenen seçenekler listesinden (bağlam menüsü), Öğeyi İncele^{(Inspect Element)} öğesine tıklayın . Bunu yapmak^(Doing) , sayfanın altındaki Geliştirici Araçları'nı^{(Developer Tools)} açar .

Geliştirme Araçları^{(Development Tools)} bölümünün sağ alt köşesinde Fonts adında bir alt başlık bulacaksınız , üzerine tıklayın.

Daha sonra, bakmak istediğiniz yazı tipinin boyutu, satır yüksekliği, ağırlığı vb. özelliklerini ve ayrıca yazı tipinin italik olup olmadığını, her zaman açık olmasına rağmen size gösterecektir.

Kullanılan yazı tipi hakkında daha fazla bilgi edinmek istiyorsanız, Firefox bunu da ele aldı. Yazı tipleri bölümünü aşağı kaydırır ve 'Sayfadaki tüm yazı tipleri'ni tıklarsanız, yazı tipleri sekmesi genişler ve o anda göz atmakta olduğunuz web sayfasında kullanılan tüm yazı tiplerini ve ayrıca nerede oldukları gösterilir. kullanılıyor. Sadece bu değil, aynı zamanda belirli bir yazı tipinin nasıl göründüğünün bir önizlemesini de alırsınız. Farenizi Geliştirici Araçları'ndaki^{(Developer Tools)} yazı tiplerinin üzerine getirdiğinizde , web sayfasının bu yazı tipini kullanan bölümleri vurgulanacaktır.

Chrome'da ^(Chrome)Geliştirici Araçlarını^{(Developer Tools)} kullanarak bir yazı tipi belirleyin

İşlem yukarıda açıklanana benzer. Sayfanın sağ tarafındaki Geliştirici Araçlarını^{(Developer Tools)} açmak için Firefox'ta^(Firefox) yaptığınız gibi ilk iki adımı izleyin .

'Bilgisayarlı' alt başlığına tıklayın.

Biraz aşağı kaydırın^(Scroll) ve ilgilendiğiniz yazı tipi hakkında (yazı tipi ailesi, boyutu vb.)

Ne yazık ki Chrome , Firefox'un^(Firefox) yaptığı gibi size herhangi bir ek bilgi sağlamıyor.

^(Identify)Edge Geliştirici Araçlarını^{(Edge Developer Tools)} kullanarak hangi Yazı^(Font) Tipinin kullanıldığını belirleyin

1. Açık Kenar
2. Sağ tıklayın ve metni seçin
3. İncele'yi seçin
4. Açılan Geliştirici Araçları'nda ^{(Developer Tools)}Hesaplanan'ın^(Computed) altına bakın.
5. Yazı tipi ayrıntılarını göreceksiniz.

Tarayıcı Geliştirici Araçları^{(Developer Tools)} ile bu sorunu çözemeyeceğinizi ve çevrimiçi araçların size daha çok uyacağını düşünmüyorsanız , çok iyi çalışan birkaç araç vardır.

Sonraki oku^{(Read next)} : Ücretli Yazı Tiplerine benzer ücretsiz alternatifler^{(find similar free alternatives to paid Fonts)} nasıl bulunur .

Identify fonts in Chrome, Edge and Firefox using Developer Tools

A typical web page gеnerally conѕists of several different elements with most of them coded in different colors and written in different fonts and styles. Sometimes, we come across web pages so beautifully designеd that they make us want to delve deep into their attributes; a very elegant theme or a nіce, prоfessional font, perhaps.

People who know their way around fonts and are fascinated by them often use free online font identifier tools to help discover fonts on the web. These online tools require you to enter a URL or upload an image with the font showcased, which is then inspected. In case you don’t want to go through the hassle of learning to use a new tool, this post is for you. Today, we will discuss how users can identify what font a particular web page is using without using a browser extension, an application, or any online tools.

The procedure that we will be discussing in this article will revolve around a setting that most web browsers offer, namely ‘Developer Tools,’ or to be specific, an option called Inspect Element. Here, we will discuss how fonts can be identified in two browsers – Chrome, Edge and Firefox.

Identify fonts on a webpage using Inspect Element in Firefox

Visit the web page of the font of which you want to identify and right-click on the text that is written in the font you are interested in.

From the list of options that show up (the context menu), click on Inspect Element. Doing so would open the Developer Tools on the bottom of the page.

On the bottom right corner of the Development Tools section, you will find a subhead named Fonts, click on it.

It will then display for you the properties of the font you wanted to look into like its size, line height, weight, etc., and also whether or not the font is in italics or not, though that is always apparent.

If you are interested to know more about the font in use, Firefox has you covered with that too. If you scroll down the fonts section and click on ‘All fonts on the page,’ the fonts tab will expand and you will be shown all the fonts that are being used on the web page you are browsing at the moment, and also where they are being used. Not just that, but you also get a preview of how a particular font looks. Hovering your mouse over the fonts in the Developer Tools will highlight the sections of the web page that use that font.

Identify a font using Developer Tools in Chrome

The process is similar to the one described above. Follow the first two steps as you did with Firefox to open the Developer Tools on the right side of the page.

Click on the ‘Computed’ sub-head.

Scroll down a bit and you will find information about the font you’re interested in (font’s family, size, etc.)

Unfortunately, Chrome doesn’t provide you with any additional information like Firefox does.

Identify which Font is used using Edge Developer Tools

1. Open Edge
2. Right-click and select the text
3. Select Inspect
4. In the Developer Tools that open, look under Computed
5. You will see the Font details.

If you don’t think you can’t work around with browser Developer Tools and that online tools would suit you better, there are several of them that work very well.

Read next: How to find similar free alternatives to paid Fonts.

Related posts

• Bir Website kullanarak Developer Tools bir Font nasıl indirilir?

• Site Data için Chrome or Edge'de bulunan Site Data'ü temizleyin. Developer Tools'ü kullanma

• Chrome, Edge, Firefox browser içinde Default Font nasıl değiştirilir

• Developer Tools Edge'da Registry or Group Policy kullanılarak devre dışı bırakın

• Fix Blurry File Open dialog Google Chrome and Microsoft Edge Kutusu

• Allow veya Chrome, Edge, Edge, Opera, Opera, Opera, Internet Explorer

• Nasıl Sync Tabs için Edge arasında, Chrome and Firefox browsers

• Bu site Edge, Chrome or Firefox'de güvenli bir mesaj değildir

• Browser Extension Simgeleri Chrome, Edge or Firefox simgeleri nasıl gizlenir

• Devre Dışı, Chrome, Edge, Firefox, Opera IE tarayıcılarda Cookies etkinleştirme

• Chrome, Edge, Edge, Firefox, IE, Opera'teki Adobe Flash Player'yi etkinleştirin

• Chrome bir Web page Çevir nasıl Firefox and Edge

• Force Links Chrome, Edge, Firefox, Firefox, Firefox, Firefox, Firefox, Firefox, Firefox, Firefox, Firefox

• Devre Dışı Bırak, Chrome, Firefox, Edge, IE'de Adobe Flash, Shockwave'u kaldırın, yani

• Block or Allow Third-Party Cookies Chrome, Firefox, Edge, IE, Opera

• Chrome, Firefox, Firefox, IE'de belirli bir web sitesi açılamıyor

• DNS Firefox, Chrome, Edge, Opera, Android, iPhone'da HTTPS üzerinden DNS'i etkinleştirin

• Chrome, Firefox ve Edge tarayıcıları üzerinde Avast extension nasıl kullanılır?

• Chrome için Share Button Plugins, Firefox and Edge browsers

• Chrome, Firefox and Edge browsers için ücretsiz Web Cache Viewer